Question

我使用jQuery UI遇到嵌套droppable元素的问题。

以下是背景资料：

我有一个父droppable元素，它具有彼此相邻排列的子可放置元素。我还有一组可拖动的元素可以拖到droppable元素上。

<div class="droppable container">
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
        <div class="droppable">
        </div>
</div>

<aside>
    <div class="draggable"></div>
    <div class="draggable"></div>
    <div class="draggable"></div>
    <div class="draggable"></div>
</aside>

droppable元素的greedy属性设置为true，理论上应该阻止传播到父元素。问题是这种方法不一致。有时父母会与孩子一起被激活。当您从一个孩子拖到相邻的孩子时，这似乎最常发生。

这是我尝试过的一个小问题。尝试将蓝色方块拖入各种粉红色的水滴区域。您会注意到，即使子元素之间没有空格，父级也会亮起。

http://jsfiddle.net/kXnAM/7/

Answer 1

看起来浏览器就像子div之间有足够的空间一样，它会触发父div的拖动事件。然而，这种情况发生得如此之快，以至于父类可能会在某些点上陷入悬停状态。以下是使用dropover事件从容器div中删除悬停类的示例：http://jsfiddle.net/vE5QK/

$(".child").on("dropover", function(event, ui) {
    setTimeout(function () {
        $('.container').removeClass('hovered');     
    }, 1);
});

我使用超时，否则时间可能与其他事件冲突。这并不完美，因为如果你快速拖动，你有时会看到父母闪现悬停状态，但它至少应该指向正确的方向。

jQuery UI Droppable：如何让元素更贪婪？

1 个答案: