Neupositionieren mit Drag & Drop

Question

Ich habe eine einfache Drag & Drop, wo Sie ein Bild von einer Box zu einer anderen verschieben. Wenn Sie das Bild in ein anderes Feld verschieben, wird es automatisch ausgerichtet. Obwohl es das Bild außerhalb der Box automatisch ausrichtet. Hier ist mein Code:

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>

Wie kann ich dieses Problem beheben?

Answer 1

Sie müssen nur Ihre padding entfernen und stellen Sie die height und die 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

Sie die Ablegebereich gemacht divs in Ihrem CSS zu klein. Wenn man sie auf die Größe des Bildes übereinstimmen richtet sie es richtig

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>