イメージをあるボックスから別のボックスに移動する単純なドラッグアンドドロップがあります。イメージを別のボックスにドロップすると、イメージは自動整列されます。ただし、画像はボックスの外に自動整列されます。ここに私のコードは次のとおりです。ドラッグアンドドロップで再配置する
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>
私はこれをどのように修正することができますか?
それを正しく整列パディングを削除します10pxの;幅と高さを20ピクセル増やします。 – allnodcoms