这是一个很容易重现的问题。检查这个 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”事件,因此实际上可以将元素扔到不可见的目标上!
有什么优雅的方法可以防止这种情况发生吗?谢谢。
最佳答案
我解决了。以下错误报告中记录了类似的行为。它还包含计算元素实际位置和高度的解决方法。 http://bugs.jqueryui.com/ticket/8477
不过,我采用了更简单的方法。通过捕获容器元素的 mouseenter 和 mouseleave 事件,我可以确定鼠标实际上悬停在列表上,从而悬停在可见项目上。在列表元素上使用一个类作为 bool 值完成剩下的工作。
$("#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();
关于jQuery UI 不可见的 droppables 仍然接受draggables,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16063253/