4

当 jQueryUI 可排序列表处于拖动操作的中间时，有没有办法强制 jQuery 更新占位符的位置，即使用户只是水平移动鼠标？（jQuery 对垂直排序的命中测试似乎只在鼠标垂直移动时才有效。）

如果没有文档化的解决方案可用，无文档的或 hacky 的解决方案涉及到可排序、可拖动等的内部结构，可以作为最后的手段。

这里有更多信息：

如果您将一个项目拖到垂直 jQueryUI 可排序列表的右侧，除非您向上或向下移动鼠标，否则列表不会排序。一旦你向上或向下移动鼠标（甚至只是 1px！），列表就会突然排序。示例位于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>
4

2 回答 2

2

查看 jQuery UI源代码，这似乎是预期的行为。

根据axis属性值的设置方式（或不设置），jQuery UI 将属性设置floating为布尔标志来跟踪您的容器是垂直列表还是水平列表（第 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));
}

verticalDirection 可以通过从返回条件中删除要求来解决您的问题_intersectsWithSides（它也可能导致意外的错误行为）。

或者：

_intersectsWithSides如果存在垂直或水平拖动，您可以尝试编辑插件的方法以返回 true：

return (verticalDirection || horizontalDirection) && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)) || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
于 2012-10-04T19:10:14.863 回答
0

对不起，也许我在这里误读了一些东西。

您是说问题是，如果您抓住第一个列表项，将其一直拖到右侧，从列表中拖出，然后将其拖到项目#4，它不会选择相关的完成位置，直到您将光标移动到至少向上或向下 1px？

因为如果是这样，我真的不认为这是一个严重的可用性问题。我复制了上面描述的示例，它需要我非常小心才能完美地水平移动鼠标。

另外，我认为所有用户的本能都是拖动项目并垂直移动它们而不是水平移动。

于 2012-10-03T13:47:52.977 回答