强制项在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>

苹果
橙子
香蕉
菠萝
葡萄
梨
芒果

$（'#fruit'）。可排序（{items:'li:not（'.fixed'）”）

这会阻止我拖放这些项目，但如果周围的项目已排序，它们仍会移动。可能有一种方法可以使用这个方法所拥有的许多回调来实现这一点，但我一直无法解决这个问题

---

也许这个方法将是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
        }       
    }
});

---

但愿我在发布我的问题并做所有那些可恶的研究之前看到了这个问题。这本可以是一个很好的起点。无论如何，这里有一个解决这个问题的通用方法。

我可以看到它们是否都在列表的顶部或底部——但我想知道，如果按照列表进行排序，它将如何工作——梨子是否仍然排在最后一个的第二位，或者与之前的梨子的关系是固定的（我能看到第二个的用途，想不出第一个的情况）？有人能把芒果拖到梨子上面，然后排序吗，梨子现在会在列表中最后一个吗？它们会保持在相同的位置（索引），只有它们周围的项目会改变。我问了一个与这个主题类似的问题（虽然在这种情况下，只是排序数组）-但是原则是sameThanks for Your答案。此解决方案对我有效，但是仍然存在排序期间项目出现移动的问题（在排序完成时是固定的）。完美的解决方案意味着项目保持固定（视觉上）排序正在进行时。由于可用的事件处理程序的数量，我认为这是可能的。感谢您的回答-我将在有空闲的10分钟时尝试测试；-）@测试人员感谢您的代码在单个固定元素上工作正常，但在多个固定元素上工作不正常。请检查上面链接中的链接我希望项目2、项目4和项目6在排序时应保留在其位置。将项目7向上拖动到项目1，检查项目4和项目6将更改其位置。

$("#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
        }       
    }
});