Jquery ui 溢出滚动容器中的jQuery UI可拖放项

Jquery ui 溢出滚动容器中的jQuery UI可拖放项,jquery-ui,scroll,overflow,droppable,Jquery Ui,Scroll,Overflow,Droppable,我已经在jQuery论坛上问过这个问题了,但它们不像这里那么活跃 当一个页面上有多个可拖放区域时,我遇到了一个问题。我有一个永远不会移动的“静态”可拖放区域,在一个有多个可拖放区域并且可以滚动的div上方(overflow:scroll)。当我滚动div以使div中的一个droppable位于静态droppable的“下方”时,如果我在静态区域上放置,则会为两个区域触发drop事件 抱歉,此解释可能含糊不清,因此我提供了一个示例: 标记: <div style="float:left; w

我已经在jQuery论坛上问过这个问题了,但它们不像这里那么活跃

当一个页面上有多个可拖放区域时,我遇到了一个问题。我有一个永远不会移动的“静态”可拖放区域,在一个有多个可拖放区域并且可以滚动的div上方(overflow:scroll)。当我滚动div以使div中的一个droppable位于静态droppable的“下方”时,如果我在静态区域上放置,则会为两个区域触发drop事件

抱歉,此解释可能含糊不清,因此我提供了一个示例:

标记:

<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <ul class="draggables">
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
        <li>Draggable</li>
    </ul>
</div>
<div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
    <div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div>
    <div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;">
        <ul class="scroll-droppables">
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
            <li style="border:1px solid #00f; height:60px;">Droppable</li>
        </ul>
    </div>
</div>
我确实试着让静态下降区域“贪婪”,但在这种情况下似乎没有帮助


你知道如何阻止这种情况发生吗?

我也有同样的问题。我可以通过先初始化“静态”下拉列表来修复它

//create draggables
jQuery('.draggables li').draggable({
    revert: 'invalid',
    cursor: 'move',
    helper: 'clone'
});

//the static droppable area
jQuery('.static-droppable').droppable({
    greedy: true,
    drop: function(event, ui) {
        alert('Dropped on static drop area!');
    }
});

//scrolling droppables
Query('.scroll-droppables li').droppable({
    drop: function(event, ui) {
        alert('Dropped on scrolling drop area!');
    }
});