HTML禁用拖放事件，div框子內容重疊

Question

我跟着拖動&在線drop教程，並自行測試一下。然後我意識到了一個問題：所以我將image1拖到Box A，將Image2拖到Box B，然後我試圖將Box1從Box A拖到Box B，問題就出現了。如果我把圖片1放在圖片B的邊緣，一切正常，兩張圖片都在圖片B中，如果我將圖片1放在圖片2上，圖片1消失了。有誰知道如何防止這種情況？無論我如何放下它們，我都希望箱子裏既有圖像顯示，也有箱子圖像。

我的例子鏈接：http://qcn.freeiz.com/VisTool/DnDrp%20Test.htm

謝謝！

Answer 1

瞭解event bubbling並瞭解ev.target最初是drop事件發生的元素，而不是您將偵聽器附加到的元素。檢查ev.target之前做什麼appendChild和ev.preventDefault()。 Here is a simple example：

function dragDrop(ev) { 
    var eleid = ev.dataTransfer.getData("Text"); 
    var el = ev.target; 
    if (el.id != 'dropzone' && el.id != 'dropzone2') { 
     el = el.parentNode; 
    } 
    el.appendChild(document.getElementById(eleid)); 
    ev.preventDefault(); 
}