如何停止与不同父级的可丢弃事件传播？

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

但是，如果我将 .icone 从 #yellow 放到 #red，它会起作用，我只有 一个事件：

start
drop in red

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

如果我将 .icone 拖到 #yellow 中，我会得到三个事件而不是一个（在我的原始代码中，我可以设置 .icone 的位置em> 当我拖动它时）：

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

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

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

我尝试了在 stackoverflow 上提出的不同解决方案，其中包含禁用其他可丢弃事件的溢出/输出事件。但是如果我使用这个解决方案，我不能将 .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/