如何使用 html5 拖放防止 div 嵌套

Question

我正在创建一个简单的 HTML5 拖放。 我有 3 个盒子说A ， B和C 。 A和B是包含图像的源， C是目标。

 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>

我的问题是，如果我将图像拖放到另一个之上，我会得到一个嵌套的 DOM 结构：

这种方法的问题是图像重叠，在我检查 DOM 之前我无法判断有两个图像。

有什么方法可以防止这种嵌套并将放置元素放在新行上？

注意：如果我将图像放在第一个下方一点，那么 DOM 看起来像这样，即使用户将图像放在另一个上方，这也是我想要的：

Answer 1

问题是您将拖动的元素附加到ev.target （它是光标下的最上面的元素）而不是ev.currentTarget （它是容器）。 引用MDN ：

当事件遍历 DOM 时， Event接口的currentTarget只读属性标识事件的当前目标。 它始终指代事件处理程序已附加到的元素，而不是Event.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"); // 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>