jQuery UI 不可见的 droppables 仍然接受 draggables答案

【问题标题】：jQuery UI non-visible droppables still accept draggablesjQuery UI 不可见的 droppables 仍然接受 draggables
【发布时间】：2013-04-17 14:49:36
【问题描述】：

这是一个容易重现的问题。检查这个 jsFiddle：http://jsfiddle.net/MichielCM/XEC9g/

<ul id="list1">
    <li>Item 1</li> 
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<ul id="list2">
    <li>Hover me over the items</li>
</ul>

<div id="status"></div>

List1 存在放置目标。它设置为最大高度，并且其溢出被隐藏。 List2 只有一个可拖动项。

$("#list1 li").droppable({
    greedy: true,
    tolerance: "pointer",
    over: function(event, ui) {
        $("#status").text(
            "Hovering over: ".concat($(this).text())
        );
    }
});

$("#list2 li").draggable();

现在，当将 list2 中的项目拖到可放置对象列表 (list1) 上时，每个目标的“over”事件都会被激活。甚至对于由于固定高度而未显示的不可见项目也会发生这种情况。这些物品也会触发 'drop' 事件，因此实际上可以将物品放在不可见的目标上！

有什么优雅的方法可以防止这种情况发生吗？谢谢。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

我解决了。以下错误报告中记录了类似的行为。它还包含计算元素的实际位置和高度的解决方法。 http://bugs.jqueryui.com/ticket/8477

不过，我采用了一种更简单的方法。通过捕获容器元素的 mouseenter 和 mouseleave 事件，我可以确定鼠标实际上是悬停在列表上，因此是可见项目。在列表元素上使用一个类作为布尔值来完成剩下的工作。

$("#list1").live({
    "mouseenter": function(event, ui) {
        $(this).addClass("over");
    },
    "mouseleave":  function(event, ui) {
        $(this).removeClass("over");
    }
});

$("#list1 li").droppable({
    greedy: true,
    tolerance: "pointer",
    over: function(event, ui) {
        if ($(this).closest("ul").hasClass("over") {
            $("#status").text(
                "Hovering over: ".concat($(this).text())
            );
        }
    }
});

$("#list2 li").draggable();

【讨论】：

【解决方案2】：

我遇到了类似的问题，并相信我找到了一个更简单的解决方案。可以简单地将一个函数传递给droppable 函数的accept 属性，该属性返回一个布尔值，表示是否应接受丢弃。

http://api.jqueryui.com/droppable/#option-accept

在我的例子中，有很多方法可以确定目标是否在单线中可见。

【讨论】：