javascript - jquery UI 可排序，末尾有固定元素

Question

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

    <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"})...

我有一个 fiddle 可以证明这一点: http://jsfiddle.net/97xdq0hj/

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

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

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

我使用的jquery sortable版本是v1.11.2。

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

Answer 1

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

所以这是书挡格式的解决方案，您只需为 anchor 元素添加一个标识符:

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

这是修改后的 fiddle : http://jsfiddle.net/97xdq0hj/1/

功劳归功于此，这个问题让我想到了这个主意。 jQuery UI Sortable dynamic fixed items