在 jQuery UI Sortable 中，第一个和最后一个可排序项目不会一直移开

Posted 2023-05-08

【中文标题】在 jQuery UI Sortable 中，第一个和最后一个可排序项目不会一直移开

【英文标题】：First and last sortable items don't consistently move out of the way in jQuery UI Sortable

【发布时间】：2020-01-04 02:06:45

【问题描述】：

在我正在编写的 Web 应用程序中，用户可以将自己的自定义按钮添加到控制面板，然后通过拖放更改这些按钮的顺序。我正在使用 jQuery UI 的 Sortable Widget 来实现这一点。

按钮从左到右排成一行。我正在使用 flexbox 来设置它们的样式，并且我设置了 sortable 方法以允许仅沿 X 轴移动。在大多数情况下，一切都运行良好，但是……

有时当我将一个按钮一直拖到开头 行，最左边的按钮不会移开以腾出空间 为它。 有时，当行已填满时，也会发生同样的事情 按钮，我尝试将一个按钮一直拖到行尾。 （最右边的按钮不会移动。）

起初，我不明白为什么最左边和最右边的按钮有时会按预期工作，有时却没有。最终我意识到这一切都取决于我抓住我拖动的按钮的位置。我设置的 JSFiddle 说明了这个问题：

https://jsfiddle.net/DanRobinson/8nap51Lg/78/

在 Fiddle 中，如果您抓住靠近其左边缘的中间按钮，您可以成功将其拖到行首，但不能拖到行尾。相反，如果您抓住靠近其右边缘的同一个按钮，您可以将其拖到行尾，但不能拖到行首。

无论用户碰巧在哪里抓取按钮，我都希望按钮的行为始终如一。 Sortable Widget 中是否有可以解决此问题的设置？ （将“公差”设置更改为“指针”似乎没有帮助。）

html：

<div id="container">        
    <div>Custom Button 1</div>
    <div>Custom Button 2 is wider than the others</div>
    <div>Custom Button 3</div>
</div>

CSS：

#container 
    display: flex;
    flex-direction: row;
    padding: 10px;
    border: 1px solid black;
    margin-top: 20px;
    width: 600px;


#container > div 
    flex: 0 1 auto;
    padding: 2px 8px;
    margin: 0 5px;
    border: 1px solid #777;
    border-radius: 3px;
    background-color: #E1E1E1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;

javascript：

$(document).ready(function () 

    $("#container").sortable(
        axis: "x",
        containment: "parent",
    );

);

【参考方案1】：

$(document).ready(function () 
    $("#container").sortable(
        axis: "x",
        containment: "parent",
        start: function(e, ui) 
            // get the instance of the sortable.
            // instance method is new to jquery ui 1.11, for previous versions
            // you can use $(this).data()['ui-sortable'];
            var sort = $(this).sortable('instance');
            // this makes the placeholder fit with the row that's being dragged
            ui.placeholder.height(ui.helper.height());
            // containment property of the sortable instance is not the same
            // as the containment option. The property is calculated
            // from the option. You need to adjust bottom coordinates
            // to take into account the row you just removed from it and the click offset.
            sort.containment[3] += ui.helper.height() * 1.5 - sort.offset.click.top;
            // Since your handle is centered, and pointer coordinates are used
            // for sortable, but top coordinates are used for containment
            // you can have issues with top row. Adjusting with the click offset
            // will resolve the issue.
            sort.containment[1] -= sort.offset.click.top;
        ,
        helper: function(e, row) 
            // From http://www.paulund.co.uk/fixed-width-sortable-tables. 
            // Sets the width of each cell to be its original width.
            // This reverts the default`enter code here` behaviour of the row collapsing into a narrower stub when being dragged.
            row.children().each(function() 
              $(this).width($(this).width());
            );
            return row;
        
    );   
);

【讨论】：

Sanjay，感谢您提供的漂亮内联 cmets，帮助我了解您的代码在做什么。不幸的是，当我将您的代码放入小提琴时，它并没有解决问题。 （请参阅jsfiddle.net/DanRobinson/8obrmkna/. 的分叉版本）您的修复是否考虑到项目是沿 x 轴（左/右）排序的？我尝试在您的 start 函数中将“height”更改为“width”，将“top”更改为“left”，但这似乎也不起作用。