ondrop 影响目标的 parent

Question

我在另一个 div 中有一个 div。 div 都有一个 ondrop 属性。当我在 child 的拖放区中移动一个元素时，它会调用 ondrop 函数两次。 child 一次，parent.

再一次

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

你能帮帮我吗？

谢谢，斯特凡

Answer 1

您可以停止事件传播例如

event.stopPropagation();

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

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

Answer 2

如果您使用 jQuery - 您应该使用 droppable 对象的 greedy 选项：

$( "#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>

ondrop 影响目标的 parent

ondrop affects target's parent

html

javascript

parent

eventhandler