Question

我有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。

关于解决这个问题的最佳方法的任何想法？

Answer 1

基于阅读其他问题，似乎没有办法使用sortable的内置功能来实现这一点。我找到了一些这个问题的例子，其中包含锁定项目在特定索引处的变化。

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

        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/

在信用到期的情况下，这个问题引发了我的想法。 jQuery UI Sortable dynamic fixed items

jquery UI可以在最后使用固定元素进行排序

1 个答案: