Question

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

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

你能帮助我吗？

谢谢，斯蒂芬

Answer 1

您可以停止事件传播例如

event.stopPropagation();

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

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

Answer 2

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

ondrop影响目标的父母

2 个答案: