尽管处于不同的堆栈级别，但是对可拖动的敏感可放置

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做出反应，即使是draggable也没有被拖出#itemBox。

See this fiddle for a live example

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

我尝试将可拖动追加到body以及#itemBox，但效果仍然相同。我还尝试了各种z-index设置（让droppable低于z-index而不是#itemBox），但无济于事。

为什么会发生这种情况，我该如何避免呢？我需要droppable只有在draggable实际离开#itemBox时才会做出反应。

Answer 1

以下是更新的 jsFiddle

当item在itemBox上时，为itemBox添加了droppable功能，并禁用了dropArea。 示例代码：

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