Javascript 我可以在不需要时将图像拖放到其他图像上'；我不能_Javascript_Drag And Drop

Javascript 我可以在不需要时将图像拖放到其他图像上'；我不能

javascript

Javascript 我可以在不需要时将图像拖放到其他图像上'；我不能,javascript,drag-and-drop,Javascript,Drag And Drop,我有一些非常简单的代码，允许我将图像拖放到不同的框中。当图像被删除时，其父节点将删除该图像，并将其删除到的区域追加该图像。那很好。但是，如果我将一个图像拖放到另一个图像上，那么出于某种原因，会触发相同的ondrop事件，因此该图像最终会被删除，但不会重新插入我尝试了几种方法来解决这个问题：添加第二个drop函数，该函数不起任何作用，并将图像的ondrop属性设置为该函数，为返回false的图像创建“disallowdrop”函数，这两种方法都不起作用。当将某个内容拖放到图像上时，应该没有理由调

我有一些非常简单的代码，允许我将图像拖放到不同的框中。当图像被删除时，其父节点将删除该图像，并将其删除到的区域追加该图像。那很好。但是，如果我将一个图像拖放到另一个图像上，那么出于某种原因，会触发相同的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>


.区域{
高度：150像素；
宽度：400px；
边框：2倍实心；
}   
函数加载（）{
var bottom=document.getElementById（“bottom”）；
appendChild（newDraggableImage（“square.jpg”，1））；
appendChild（newDragableImage（“triangle.jpg”，2））；
appendChild（newDragableImage（“circle.jpg”，3））；
}
函数newDragableImage（源，id）{
var image=document.createElement（'img'）；
image.src=源；
image.id=id；
image.draggable=true；
image.ondragstart=拖动；
返回图像；
}
函数删除（事件）{
event.preventDefault（）；
var image=document.getElementById（event.dataTransfer.getData（'Text'）；
image.parentElement.removeChild（image）；
event.target.appendChild（图像）；
}
函数allowDrop（事件）{
event.preventDefault（）；
}
函数拖动（事件）{
event.dataTransfer.setData（'Text'，event.target.id）；
}

我不太确定是否有足够的细节来理解你在做什么。我的理解是，你把图像放到一个div上，然后这个div就包含了这个图像。你只想把图像放在div本身上，而不是放在其他图像上

然后你们所说的是事件的冒泡。事件冒泡是指子元素继承其父元素的事件处理程序时，您不希望这样做。在这种情况下，可以使用addEventListener并将第三个值设置为false

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

是的，这是正确的，我拖放图像到div中，然后它们移动到该div中。如果不清楚的话，很抱歉。我不知道事件冒泡是一件事，这很有道理。谢谢此外，我在对事件冒泡的研究中发现，在ondrop函数中执行event.stopPropagation（）。