Перемещение с помощью перетаскивания

Question

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

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>

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

Answer 1

Вы просто должны удалить 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>

Answer 2

Вы сделали зональные падение дивы слишком мал, в вашем 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>

Answer 3

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>