强制一个项目保留在jQuery UI可排序列表中

我已经设置了一个jQuery可排序的列表,但是我需要能够将一些可排序的“固定”项目保留在原位,而其他项目可以对它们进行排序.我认为会有这样的方法来实现这一点,唉,情况并非如此.

我可以设置列表,不包括相关的项目：

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

<script type="text/javascript">
    $('#fruit').sortable({items: "li:not('.fixed')"})
</script>

这阻止我拖放这些项目,但如果它们周围的项目被排序,它们仍然移动.可能有一种方法可以使用这种方法的许多回调,但是我一直无法解决这个问题.

也许这种方法将是一个很好的除了UI可排序的选项？

解决方法

我设法通过修改抖动代码,并将其附加到“更改”事件而不是“停止”.我通过查看索引在拖动项目时如何变化并设置一些条件来完成.它也适用于多个固定元素. “lockto”变量定义固定元素的位置,固定元素最初应处于此位置.您可能会重写此文件并将其包装在一个函数中,因此您不需要手动设置所有固定元素的“lockto”变量.

$("#sortable").sortable({
    "cancel":"li.static","change":function(event,ui) {
        var lockto = 6;
        var thisindex = $(ui.helper).index(fixed);         
        var fixed = $("#static-"+lockto);           
        var index = $("#sortable li").index(fixed);
        var targetindex = lockto+1;
        if(index !== targetindex) {         
            if(index > targetindex ) {
                fixed.prev().insertAfter(fixed); //move it up by one position
            } else if(index==(targetindex-1) && thisindex>targetindex) {
                //don't move it at all
            } else {
                fixed.next().insertBefore(fixed); //move it down by one position
            }
        } else if(index==targetindex && thisindex>targetindex) {
            fixed.prev().insertAfter(fixed); //move it up by one position
        }       
    }
});