HTML禁用Drop事件，div box子内容重叠 [英] HTML disable Drop event, div box child contents overlap

问题描述

我在线跟踪了拖放教程，并自己测试了一下。然后我意识到了一个问题：所以我将image1拖到Box A，将image2拖到Box B，然后我试图将image1从Box A拖到Box B，问题出现了。如果我将box1放在Box B的边缘，一切正常，两个图像都在Box B中，如果我将image1放在image2的顶部，则image1消失了。有谁知道如何防止这种情况？无论我如何放下它们，我都希望在盒子中显示盒子。

I followed the drag&drop tutorial online, and test it a little bit on my own. Then I realized a problem: so I dragged image1 to Box A and image2 to Box B, then i'm trying to drag image1 from Box A to Box B, the issue appears. If I drop image1 on the edge of Box B, everything works fine, both images are in the Box B, if I drop image1 on top of image2, image1 disappeared. does anyone know how to prevent this? I want box both image shows in the box no matter how I drop them.

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

谢谢！

推荐答案

了解事件冒泡并了解 ev.target 最初是元素 drop 事件发生在，而不是您附加侦听器的元素。在执行 appendChild 和 ev.preventDefault（） ev.target 是什么C $ C>。 这是一个简单的示例：

Learn about event bubbling and understand that ev.target is initially the element the drop event occurred on, not the element you attached the listener to. Check what ev.target is before doing appendChild and 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();
}

这篇关于HTML禁用Drop事件，div box子内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！