jquery - droppable 对 draggables 敏感，尽管处于不同的堆栈级别

Question

想象一下这个非常基本的可拖放设置:

<div class="container">
    <div id="dropArea"></div>
</div>
<div id="itemBox">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

#dropArea 是可放置的。

#itemBox > .item 是可拖动对象。

由于某种原因，droppable 对 draggable 作出 react ，甚至 draggable 甚至还没有被拖出 #itemBox。

See this fiddle for a live example .

虽然我确信这是完全正确的，但我对此感到有点困惑。这只是我对 draggable/droppable 的行为方式的误解，导致我遇到这个问题。

我尝试将可拖动对象附加到 body 以及 #itemBox，但效果保持不变。我还尝试使用各种 z-index 设置(给可放置的 z-index 低于 #itemBox)但无济于事。

为什么会发生这种情况，我该如何避免？我需要 droppable 仅在 draggable 实际离开 #itemBox 时使用react。

Answer 1

这是更新的 jsFiddle

为 itemBox 添加了 droppable 功能，并在 item 位于 itemBox 上方时禁用了 dropArea。示例代码:

$('#itemBox').droppable({
   hoverClass: 'dragHover',
   over:function(){
      $('#dropArea').droppable('disable').removeClass('ui-state-disabled dragHover');    
   },
   out:function(){
      $('#dropArea').droppable('enable').addClass('dragHover');
   }
});