如何使用 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>