jQuery UI不可见的droppable仍然接受draggable

时间:2013-04-17 14:49:36

标签: jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

这是一个容易复制的问题。检查这个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中的项目拖放到droppables列表(list1)上时,将激活每个目标的“over”事件。这甚至发生在由于固定高度而未显示的不可见项目。这些项目也会触发'drop'事件,因此实际上可以将项目放在不可见的目标上!

任何优雅的方法来防止这种情况?感谢。

2 个答案:

答案 0 :(得分:2)

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

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

$("#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();

答案 1 :(得分:0)

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

  

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

就我而言,有很多方法可以确定目标是否可以通过单行显示。