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>