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

Question

在我正在编写的 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",
    });

});

Answer 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;
        }
    });   
});