How to prevent nesting of div using html5 drag and drop

Question

I am creating a simple HTML5 drag and drop. I have 3 boxes say A , B and C . A and B are source which contain image and C is the target.

 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: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } #div3 { float: left; width: 100px; height: 100px; margin: 10px; padding: 10px; border: 1px solid black; }

 <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

My issue is if I drag and drop image one above another I get a nested DOM structure:

Issue with this approach is that the images overlap and I can't tell there are two images until I check the DOM.

Is there any way to prevent this nesting and put the drop element on a new row?

Note: If I drop the image a little below then the first one then the DOM looks like this and this is how I want even if user drops the images one above another:

Answer 1

The problem is that you're appending the dragged element to the ev.target (which is the topmost element under the cursor) and not to the ev.currentTarget (which is the container). Quote from the MDN :

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target , which identifies the element on which the event occurred and which may be its descendant.

Updated snippet:

 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"); // currentTarget instead of target ev.currentTarget.appendChild(document.getElementById(data)); }

 #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } #div3 { float: left; width: 100px; height: 100px; margin: 10px; padding: 10px; border: 1px solid black; }

 <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>