JQuery 可排序列表和固定/锁定项目

Question

是否可以锁定 JQuery 可排序列表中的列表项，以使这些项目保留在列表中的特定位置。

例如，

考虑这个带有锁定项目的伪列表...

item A
item B(locked)
item C(locked)
item D
item E
item F
item G(locked)

所以，我希望将项目 B、C 和 G 固定为这样，如果用户将项目 D 拖放到列表的开头，则项目 A“跳过”固定/锁定的项目B 和 C 的结果如下...

item D
item B(locked)
item C(locked)
item A
item E
item F
item G(locked)

我一直在寻找这样的东西没有运气。有可能吗..？

Answer 1

看看这个：Forcing an item to remain in place in a jQuery UI Sortable list

另外，我在这里用多个固定元素实现了上述解决方案：http://jsfiddle.net/enBnH/12/（已过时，见下文） 我认为这是不言自明的。

编辑：

我已经自动化了生成 lockto 值以及将 ID 添加到具有“固定”类的 lis 的过程（请注意，我必须添加一个 ID，以便我们可以引用它）

在此处查看完整的解决方案：http://jsfiddle.net/enBnH/44/

编辑

好的，在上面出现无数错误之后，我自己重写了该死的东西： http://jsfiddle.net/thomas4g/GPMZZ/15/

注意：以上方法确实有效，但@DarthJDG 的回答对我来说似乎好多了。我要让我的人可能更喜欢我的行为方式（我学会了不要删除东西，只是因为有更好的版本：P）

Answer 2

这是一个希望没有错误的版本，在您拖动时会更新。它会在排序开始时生成项目的当前所需位置，这意味着您应该能够在需要时更改类，刷新小部件的列表项，然后就可以开始了。

它还使用 sortable 的内置 items 属性来防止拖动固定项并解决列表顶部和底部的任何排序问题。

我试图移动固定项目，但这导致了可怕的错误行为，尤其是当组中有多个固定项目时。最终的解决方案是从列表中分离所有固定项，在前面添加一个辅助元素，然后将固定元素重新插入到所需位置，这似乎修复了所有错误。

在此处试用演示：http://jsfiddle.net/PQrqS/1/

HTML：

<ul id="sortable">
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>

CSS：

.static { color:red; }

li { background-color:whitesmoke; border:1px solid silver; width:100px; padding:2px; margin:2px; }

Javascript：

$('#sortable').sortable({
    items: ':not(.static)',
    start: function(){
        $('.static', this).each(function(){
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    change: function(){
        $sortable = $(this);
        $statics = $('.static', this).detach();
        $helper = $('<li></li>').prependTo(this);
        $statics.each(function(){
            var $this = $(this);
            var target = $this.data('pos');

            $this.insertAfter($('li', $sortable).eq(target));
        });
        $helper.remove();
    }
});

Answer 3

我扩展了jQuery.Ui.sortable：

概述

jQuery.Ui.sortable 具有fixed 功能的小部件扩展。此功能允许用户修复列表中的元素。
使用.fixedsortable() 构造函数，您可以构造一个.sortable() 类，该类扩展了这些特性。您可以使用原始方法和扩展方法。

代码

https://gist.github.com/3758329#file_fixedsortable.js > fixedsortable.js

示例

http://jsfiddle.net/omnosis/jQkdb/

用法

一般：

要使用，请将fixed 属性添加到可排序列表选项中：

$("#list").fixedsortable({
   fixed: (value)
})

值可以是：

• 整数 示例：3
• 数组 整数示例：[1,2,5]
• 一个html元素或html元素列表
• css 选择器
• jquery 对象

HTML：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //the jquery 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> //the original jquery-ui   
<script type="text/javascript" src="https://raw.github.com/gist/3758329/91749ff63cbc5056264389588a8ab64238484d74/fixedsortable.js"></script> //the extended sortable
...
<ul id="sortable1">
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>

<ul id="sortable2">
    <li>bananas</li>
    <li foo="asd">oranges</li>
    <li foo="dsa">apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

<ul id="sortable3">
    <li>bananas</li>
    <li>oranges</li>
    <li>apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

Javascript

$(function() {
    $("#sortable1").fixedsortable({
        fixed: "> .static"
    });

    $("#sortable2").fixedsortable({
        fixed: $("li[foo]").css("background","red")
    });

    $("#sortable3").fixedsortable({
        fixed: 2
    })
});

注意事项：

如果你坚持使用.sortable 代替.fixedsortable，你可以使用https://gist.github.com/3758329#file_sortable.js 代替jquery.ui 库。这是jQuery.ui 的完全替代品，但我不建议使用它，因为以后会更新。

我已经为此工作了超过 12 个小时 :( 我疯了..