Question

我已经设置了一个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 Sortable选项的一个很好的补充？

Answer 1

我设法通过稍微修改抖动代码来做到这一点，并将其附加到“更改”事件而不是“停止”。我通过查看拖动项目并设置一些条件时索引的变化来做到这一点。它也适用于多个固定元素。 “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
        }       
    }
});

Answer 2

我猜这是非常重要的。对于你的例子来说，通过一点点工作仍然可行（通用解决方案会有点困难）

检查http://jsbin.com/etubi/2是否有演示（http://jsbin.com/etubi/2/edit代码）

$("#sortable").sortable({
    cancel: "li.fixed", //exclude fixed ones
    stop:function(event, ui) {
        //nothing to do for #f0 as you can't sort anything above it
        var f5 = $("#f5");
        var indf5 = $("#sortable li").index(f5);
        //if f5 not in right position -> swap position
        if(indf5 !== 5) {
            if(indf5 > 5) {
                f5.prev().insertAfter(f5); //move it up by one position
            } else {
                f5.next().insertBefore(f5); //move it down by one position
            }
        }
    }
});

Answer 3

希望在我发布之前我已经看过这个问题并做了所有可分类研究。这可能是一个很好的起点。无论如何，这是JQuery Sortable set item to an index programmatically这个问题的通用解决方案。

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

3 个答案: