onrop影响目标的父母

Question

我在另一个div中有一个div。 这两个div都有一个ondrop属性。 当我移动孩子的dropzone中的元素时，它会调用ondrop函数两次。一次为孩子，然后一次为父母。

我的问题是：即使放置目标位于另一个放置目标容器中，我也不希望容器受到放置元素的影响。换句话说，我不希望ondrop事件被激发两次。

你能帮我吗？

感谢， 斯特凡

Answer 1

可以例如停止事件传播

event.stopPropagation(); 

这将停止将drop事件传播到父元素。

P.S.有些代码不会伤害。

Answer 2

如果你正在使用jQuery - 你应该使用greedy选项droppable对象：

$("#draggable").draggable(); 
 
$("#droppable").droppable({ 
 
    greedy: true, 
 
    drop: function(e) { 
 
    alert("dropped inner"); 
 
    } 
 
}); 
 
$("#droppable-big").droppable({ 
 
    greedy: true, 
 
    drop: function(e) { 
 
    alert("dropped"); 
 
    } 
 
});

#draggable { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ccc; 
 
} 
 
#droppable-big { 
 
    width: 120px; 
 
    height: 120px; 
 
    background: red; 
 
    color: #fff; 
 
    padding: 60px; 
 
} 
 
#droppable { 
 
    width: 75px; 
 
    height: 75px; 
 
    background: #999; 
 
    color: #fff; 
 
    padding: 10px; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div id="draggable">Drag me</div> 
 
<div id="droppable-big"> 
 
    <div id="droppable">Drop here</div> 
 
</div>