html - HTML 禁用 Drop 事件，div 框子内容重叠

Question

我在网上按照拖放教程进行操作，并自己进行了一些测试。然后我意识到一个问题：所以我将image1拖到Box A，将image2拖到Box B，然后我尝试将image1从Box A拖到Box B，出现问题。如果我将 image1 放在框 B 的边缘，一切正常，两个图像都在框 B 中，如果我将 image1 放在 image2 的顶部，则 image1 消失了。有谁知道如何防止这种情况？无论我如何丢弃它们，我都希望将两个图像都显示在框中。

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

谢谢！

Answer 1

了解事件冒泡并了解ev.target最初是drop事件发生的元素，而不是您将侦听器附加到的元素。ev.target在做之前检查是什么appendChild和ev.preventDefault()。 这是一个简单的例子：

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();
}