У меня есть простое перетаскивание, где вы перемещаете изображение из одного окна в другое. Всякий раз, когда вы перетаскиваете изображение в другое поле, оно автоматически выравнивается. Хотя, это автоматически выравнивает изображение за пределами коробки. Вот мой код:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 35px;
    height: 35px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Как я могу это исправить?

1
Nathan Chan 11 Янв 2017 в 18:33

3 ответа

Лучший ответ

Вам просто нужно удалить свой padding и настроить height и width

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    border: 1px solid black;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
1
Alexis 11 Янв 2017 в 15:39

Вы сделали слишком малую область падения в вашем CSS. Если вы сопоставите их с размером изображения, оно будет правильно выровнено

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
0
Joffutt4 11 Янв 2017 в 15:39
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
    float: left;
    width: 55px;
    height: 55px;
    margin: 10px;
    padding: 0px;
    border: 1px solid black;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">
  
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
0
allnodcoms 11 Янв 2017 в 15:40