Question

开始当元素具有不同的父元素时，greedy不会运行，并且此元素是叠加的。像这样：

<div id="one">
  <div class="icone draggable"></div>
  <div id="background" class="droppable">
    <div id="grey" class="droppable"></div>
    <div id="red" class="droppable"></div>
  </div>
</div>
<div id="two">
  <div id="yellow" class="droppable"></div>
</div>

如果我将 .icone 从 #red 删除到 #yellow （ #yellow 在上#background ），我有两个事件（drop事件），如下所示：

start
drop in background (<= Bad event)
drop in yellow

但是，如果我将 .icone 从 #yellow 删除到 #red ，那么它的工作原理我只有一个事件：

start
drop in red

#yellow 没有停止事件传播， #red 有正确的反应。

如果我在 #yellow 中拖动 .icone ，我有三个事件而不是一个（在我的orignal代码中我可以设置 .icone的位置当我拖动它时：

start
drop in background (<= Bad event)
drop in yellow (<= Bad event)
drag in yellow

请参阅my example code ，如何停止将事件传播到 #yellow ？

#red和#yellow可以像 second example code 一样叠加。

我尝试了在stackoverflow上提出的不同解决方案，其中包含禁用其他可放置事件的over / out事件。但是如果我使用这个解决方案，我就不能将 .icone 删除到 #yellow 。

感谢。

（请参见此处的解决方案： http://jsbin.com/mubenaze/21/edit）

Answer 1

我猜你被迫在像#yellow这样的例外上单独工作。这是一个可能的解决方案，但它可能需要一些CSS修复（因为禁用的droppables获得不透明度：0.35; 但是我想不出任何修复比在需要时禁用背景更好。

$( "#yellow" ).on( "dropout", function( event, ui ) {
$("#background").droppable('option', 'disabled', false);
} );

$( "#yellow" ).on( "dropover", function( event, ui ) {
$("#background").droppable('option', 'disabled', true);
} );

需要为不在后台的每个div添加这些选项。

重新编辑：添加此项以在删除后重新启用#background：

$( "#yellow" ).on( "drop", function( event, ui ) {
$("#background").droppable('option', 'disabled', false);
} );

http://jsbin.com/mubenaze/18/

如何阻止不同父级的可放弃事件传播？

1 个答案: