我已经设置了一个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
}
}
});