Question

我有一些非常简单的代码，允许我将图像拖放到不同的框中。删除图像时，其父节点将删除它，并将其删除的区域附加到它上面。这很好。但是，如果我将图像拖放到另一个图像上，那么由于某种原因，相同的ondrop事件会触发，因此图像最终会被删除，但不会重新插入。

我已经尝试了几个方法来解决这个问题：添加第二个drop函数，什么也不做，并将图像的ondrop属性设置为，为返回false的图像创建“disallowdrop”函数，都不起作用。当某些内容被放到图像上时，应该没有理由调用drop函数。无论如何，我认为默认情况下元素不接受拖动的元素。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .area {
                height:150px;
                width:400px;
                border:2px solid;
            }   
        </style>
    </head>
    <body onload="load()">

        <script type="text/javascript">

            function load() {
                var bottom = document.getElementById("bottom");
                bottom.appendChild(newDraggableImage("square.jpg", 1));
                bottom.appendChild(newDraggableImage("triangle.jpg", 2));
                bottom.appendChild(newDraggableImage("circle.jpg", 3));
            }

            function newDraggableImage(source, id) {
                var image = document.createElement('img');
                image.src = source;
                image.id = id;
                image.draggable = true;
                image.ondragstart = drag;
                return image;
            }

            function drop(event) {
                event.preventDefault();
                var image = document.getElementById(event.dataTransfer.getData('Text'));
                image.parentElement.removeChild(image);
                event.target.appendChild(image);
            }

            function allowDrop(event) {
                event.preventDefault();
            }

            function drag(event) {
                event.dataTransfer.setData('Text', event.target.id);
            }

        </script>
        <div id="top"    class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="bottom" class="area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </body>
</html>

Answer 1

我不太确定是否有足够的细节来了解您正在做的事情。我的理解是你将图像放在div上，然后div包含该图像。而你只想让图像放在div本身上，而不是放在其他图像上？

你当时谈论的是事件冒泡。事件冒泡是指子元素继承父母的事件处理程序，这是您不想要的。在这种情况下，您可以使用addEventListener并将第三个值设置为false。

// watch the false!
document.getElementById("top").addEventListener("drop", drop, false);

当我不能够时，我可以将图像拖放到其他图像上

1 个答案: