强制项目保留在jQuery UI可排序列表中
我已经设置了一个jQuery可排序列表，但是我需要能够将可排序的“固定”中的一些项目保留在原位，并且其他项目可以对它们进行排序。 我认为会有内置的方法来实现这一点，但事实并非如此。
我可以设置列表而不包括有问题的项目：
- apples
- oranges
- bananas
- pineapples
- grapes
- pears
- mango
$('#fruit').sortable({items: "li:not('.fixed')"}) 这使我无法拖放这些项目，但如果对它们周围的项目进行排序，它们仍会移动。 可能有一种方法可以使用此方法具有的许多回调来执行此操作但我无法解决此问题。
也许这种方法可以成为UI Sortable选项的一个很好的补充？
我设法通过稍微修改抖动代码来做到这一点，并将其附加到“更改”事件而不是“停止”。 我通过查看拖动项目并设置一些条件时索引的变化来做到这一点。 它也适用于多个固定元素。 “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 } } });
我猜这是非常重要的。 对于你的例子来说，通过一点点工作仍然可行（通用解决方案会有点困难）
查看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 } } } });
希望在我发布之前我已经看过这个问题并做了所有可分类研究。 这可能是一个很好的起点。 无论如何，这里的JQuery Sortable将项目设置为索引，以编程方式解决此问题。
您可以使用可排序选项“取消”
例如：
$("#sortable").sortable({ cancel: "li.group_elem" });
这样，具有“group_elem”类的li元素将不可排序。