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

是否可以锁定 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)

我一直在寻找类似的东西但没有运气。是否可以..？

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

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

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

尝试这里的演示：http://jsfiddle.net/PQrqS/1/ 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();
    }
});