Jquery Dropable对拖拽敏感，尽管处于不同的堆栈级别

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

<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

中拉出

虽然我确信这是完全正确的，但我对此感到困惑。这只是我对可拖动/可拖放的行为的误解，导致了这个问题

我尝试将draggable附加到

正文

以及

#itemBox

中，但效果仍然相同。我还尝试了各种

z-index

设置（使下拉列表的

z-index

低于

#itemBox

），但没有效果

---

为什么会发生这种情况？我如何避免？我需要Dragable仅在Dragable实际离开

#itemBox

后才做出反应，这是更新后的

为itemBox添加了可拖放功能，并在itemBox上方禁用了dropArea。 示例代码：

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