溢出滚动容器中的 jQuery UI droppables

Question

我确实已经在 jQuery 论坛上问过这个问题，但他们并不像这里那么活跃。

当页面上有多个可放置区域时，我遇到了问题。我有一个永远不会移动的“静态”可放置区域，位于具有多个可放置区域并且可以滚动（溢出：滚动）的 div 之上。当我滚动 div 以使 div 中的一个可放置项位于静态可放置项“下方”时，如果我将其放置在静态区域上，则两个区域都会触发放置事件。

抱歉，这个解释可能很模糊，所以我整理了一个示例：

标记：

<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>

Javascript：

//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!');
    }
});

我确实尝试使静态放置区域“贪婪”，但这似乎对这种情况没有帮助。

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

Answer 1

我也有同样的问题。我能够通过首先初始化“静态”Droppable 来修复它。