使用拖放重新定位

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

你所做的拖放區域的div在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>