jqueryUI sortable：如何在拖动时强制更新占位符位置

2023年8月18日 252次阅读

当jQueryUI可排序列表处于拖动操作的中间时,是否有办法强制jQuery更新占位符的位置,即使用户只是水平移动鼠标？ (jQuery对垂直可排序的命中测试似乎只有在鼠标垂直移动时才能工作.)

如果没有文档化的解决方案,那么无法解决或者讨厌的解决方案可以将可排序的,可拖动的等内部包围在一起,作为最后的手段是可以的.

这里有更多信息：

如果将项目拖动到垂直jQueryUI可排序列表的右侧,除非您向上或向下移动鼠标,否则列表不会排序.一旦你向上或向下移动鼠标(甚至只是1px！),列表就会排序.例子是在http://jsfiddle.net/f3Lhg/并在下面摘录.

这可能看起来像是一个角落的情况,但是当连接列表从一个列表侧向拖动到另一个列表时,它实际上是常见的.即使整个拖拽不完全水平,前30px-100px可能会导致不可预测的拖拽行为和糟糕的用户体验.即使连接列表出现问题更多,您也可以通过拖出列表并从侧面返回列表轻松地使用单个列表进行复制.

问题不是浏览器特定的.在我测试的所有浏览器上,行为都是相同的.此外,添加容差选项无法解决问题.

这是一个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,这似乎是预期的行为.

根据轴属性值的设置方式(或不设置),jQuery UI将浮动的属性设置为布尔标志,以跟踪容器是垂直列表还是水平列表(第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行)使用浮动属性来确定您没有在水平列表中拖动,因此返回垂直碰撞结果.如果同时存在垂直拖动方向和元素交集,则垂直碰撞检查仅返回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));
点赞