ドラッグアンドドロップで再配置する

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を調整する必要があるとあなたはあなたのCSSのドロップエリアのdivがあまり小さく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

。あなたは、画像のサイズにそれらを一致させる場合には、

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>