我有一些非常简单的代码，可以将图像拖放到不同的框中。放置图像时，其父节点将其删除，并将其放置到的区域附加到图像上。很好但是，如果我将一个图像拖放到另一个图像上，则由于某种原因会触发相同的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>
最佳答案
我不太确定是否有足够的细节来了解您在做什么。我的理解是您要在div上放置图像，然后div包含该图像。而且您只希望将图像拖放到div本身上，而不希望放置在其他图像上？
您正在谈论的是事件冒泡。事件冒泡是指子元素继承其父级的事件处理程序，而您则不需要。在这种情况下，可以使用addEventListener并将第三个值设置为false。
// watch the false!
document.getElementById("top").addEventListener("drop", drop, false);