jquery - 尽管处于不同的堆栈级别，但对可拖动对象仍然敏感

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

<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是可拖动对象。

由于某些原因，可放置对象会对可拖动对象做出反应，即使可拖动对象甚至都没有被拖出#itemBox。

See this fiddle for a live example。

我对此感到困惑，尽管我确信它是完全正确的。仅仅是我对可拖动/可拖放行为的误解，导致我遇到了这个问题。

我尝试将可拖动对象附加到body以及#itemBox，但是效果保持不变。我还尝试了各种z-index设置（使droppable的z-index比#itemBox低），但无济于事。

为什么会发生这种情况，我该如何避免呢？仅当可拖动对象实际离开#itemBox时，我才需要droppable做出反应。

最佳答案

这是更新的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');
   }
});

关于jquery - 尽管处于不同的堆栈级别，但对可拖动对象仍然敏感，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22758419/