第一个和最后一个可排序项在jQuery UI Sortable中始终不一致。]

Question

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

按钮从左到右排成一行。我正在使用flexbox设置样式，并且将sortable方法设置为仅允许沿X轴移动。大部分情况下一切正常，但是…

• 有时当我将按钮一直拖动到在该行中，最左边的按钮不会移开以腾出空间为此。
• 有时，当该行已填满按钮，然后尝试将按钮一直拖动到行尾。 （最右边的按钮不会退缩。）

起初，我不知道为什么最左边和右边的按钮有时表现出预期的效果，而有时却表现不佳。最终，我意识到这全取决于我拖动按钮的位置。我设置的JSFiddle说明了问题：

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

在小提琴中，如果抓住中间按钮靠近其左边缘，则可以成功地将其拖动到行的开头，但不能拖动到行的结尾。相反，如果您抓住同一按钮靠近其右边缘，则可以将其拖动到行的末尾，但不能拖到行首。

我希望按钮在用户碰巧抓住它们的地方始终表现一致。在可排序小部件中是否有可以解决此问题的设置？ （将“公差”设置更改为“指针”似乎无济于事。）

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",
    });

});

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

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