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

Question

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

<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

但是，如果我将.yone从#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

请参阅我的示例代码 ，如何停止事件传播到#yellow ？

#red和#yellow可以像第二个示例代码一样叠加。

我尝试了在stackoverflow上提出的不同解决方案，其中包含禁用其他可放置事件的over / out事件。 但是，如果我使用这个解决方案，我不能退出.yone到#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添加这些选项。

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

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

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