0

我在使用 jQuery UI 嵌套可放置元素时遇到问题。

这是背景：

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

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

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

这是我尝试过的一个jsfiddle。尝试将蓝色方块拖入各种粉色放置区。您会注意到有时父元素会亮起，即使子元素之间没有空格。

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

4

1 回答 1

0

看起来浏览器的行为就像子 div 之间有足够的空间来触发父 div 的拖动事件。但是，这种情况发生得如此之快，以至于父类有时会卡在悬停状态。这是使用dropover事件从容器 div 中删除悬停类的示例：http: //jsfiddle.net/vE5QK/

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

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

于 2013-04-26T01:02:35.807 回答