当 jQueryUI 可排序列表正在进行拖动操作时，是否有办法强制 jQuery 更新占位符的位置，即使用户只是水平移动鼠标？ (jQuery 对垂直排序的 HitTest 似乎只在鼠标垂直移动时才起作用。)
如果没有记录的解决方案可用，则涉及对可排序、可拖动等的内部进行胡闹的未记录或黑客解决方案可以作为最后的手段。
这里有更多信息:
如果将项目拖到垂直 jQueryUI 可排序列表的右侧，除非上下移动鼠标，否则列表不会排序。一旦您向上或向下移动鼠标(即使只是 1 像素!)，列表就会突然排序。示例位于 http://jsfiddle.net/f3Lhg/并摘录如下。
这似乎是一种特殊情况，但当连接的列表从一个列表横向拖动到另一个列表时，这种情况实际上很常见。即使整个拖动不是完全水平的，前 30px-100px 也可能是水平的，从而导致不可预测的拖动行为和糟糕的用户体验。尽管问题更多地发生在连接的列表中，但您可以通过从列表中拖出并从侧面返回到列表中来轻松地重现单个列表。
问题并非特定于浏览器。我测试的所有浏览器上的行为都是相同的。此外，添加 tolerance 选项并不能解决问题。
这是 jQueryUI 错误还是预期行为？是否有已知的解决方法？
顺便说一句，在我的应用程序中，我已将列表连接到右侧，因此我无法使用 {axis:'y'} 选项，因为这会阻止拖动到连接的列表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<style type="text/css">
.sortable { list-style-type: none; width: 400px; }
.sortable li { margin: 5px 0; padding: 30px; border: 1px solid #999; }
.sortable li.placeholder { margin: 0; height: 4px; border: 0; padding: 0; background-color: #800; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.sortable').sortable({
placeholder: 'placeholder'
}).disableSelection();
});
</script>
</head>
<body>
<ul class="sortable">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ul>
</body>
</html>
最佳答案
查看 jQuery UI source code这似乎是预期的行为。
根据 axis 属性值的设置(或不设置)，jQuery UI 将属性 floating 设置为 bool 标志，以跟踪容器是垂直容器还是垂直容器。水平列表(第 46 行):
//Let's determine if the items are being displayed horizontally
this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false;
此值用于确定用户拖动元素时 jQuery UI 如何处理碰撞检测。
具体:
方法_intersectsWithSides(第492行)使用属性floating来确定您没有在水平列表中拖动，因此返回垂直碰撞结果。仅当同时存在垂直拖动方向和元素相交时，垂直碰撞检查才会返回 true:
if (this.floating && horizontalDirection) {
return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
} else {
return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
}
可以通过从 _intersectsWithSides 中的返回条件中删除 verticalDirection 要求来解决您的问题(这也可能会导致意外的错误行为)。
或者:
您可以尝试编辑插件的 _intersectsWithSides 方法，以在存在垂直或水平拖动时返回 true:
return (verticalDirection || horizontalDirection) && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)) || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
关于jqueryUI 可排序 : how to force update of placeholder position while dragging，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12561671/