jquery UI 可排序，最后带有固定元素答案

【问题标题】：jquery UI sortable with fixed elements on the endjquery UI 可排序，最后带有固定元素
【发布时间】：2015-07-23 15:08:55
【问题描述】：

我有 2 个列表，其中一个最初是空的。我希望将固定元素放在最后，以便将一个元素拖到空列表中，它最终位于锚元素之间（如书挡）。但是当我拖动项目时，它们总是在锁定元素之后结束（我使用项目和'not：'选择器来排除锚点）。而不是他们之间：

    <ul id="list1" class="connected">
       <li class="Anchor">Top Of List 1</li>
       <li>Item 1</li>
       <li>Item 2</li>
       <li class="Anchor">Bottom Of List 1</li>
    </ul>
    <ul id="list1" class="connected">
       <li class="Anchor">Top Of List 2</li>
       <li class="Anchor">Bottom Of List 2</li>
    </ul>

    $( "#list1" )
        .sortable({ items: "li:not(.Anchor)",
             connectWith: ".connected"})...

我有一个小提琴可以证明这一点： http://jsfiddle.net/97xdq0hj/

即使在 JQuery UI 网站上，这似乎也被破坏了：一旦将项目拖到固定元素的顶部/底部，就无法将它们重新放在它们之间。

https://jqueryui.com/sortable/#items

我也尝试过取消锚点，但这仍然允许将东西放在锚点之外。

我使用的 jquery 可排序版本是 v1.11.2。

关于解决这个问题的最佳方法有什么想法吗？

【问题讨论】：

标签： javascript jquery-ui jquery-ui-sortable

【解决方案1】：

根据阅读其他问题，似乎没有办法使用可排序的内置功能来做到这一点。我发现了一些这个问题的例子，锁定项目位于特定索引处。

所以这里是书挡格式的解决方案，你只需为锚元素添加一个标识符：

        var makeSortable=function(selector) {
                $(selector)
                    .sortable({
                        items: "li:not(.Anchor)",
                        connectWith: ".connected",
                        change: function() {
                            var list = $(this).closest('ul');
                            var topAnchor = $(list).find('.topAnchor');
                            var bottomAnchor =     $(list).find('.bottomAnchor');
                            $(list).prepend($(topAnchor).detach());
                            $(list).append($(bottomAnchor).detach());
                        }
                    });
        };
        makeSortable( "#list1" );
        makeSortable( "#list2" );

这是修改后的小提琴： http://jsfiddle.net/97xdq0hj/1/

credit where credit is due，这个问题让我想到了这个想法。 jQuery UI Sortable dynamic fixed items

【讨论】：