JQuery可排序列表,其中一些元素按顺序冻结？

Question

我正在寻找一种方法来获得类似JQuery的可排序列表(链接),但是其中一些元素位于固定的不可分割位置.

使一些元素不可分割是微不足道的,但是它们的位置不会保持固定,因为它们上方和下方的可拖动元素的数量可以改变.

更具体一点:我按排名顺序列出了10个项目.我希望用户能够通过拖动(可排序列表)来更改某些项目的排名,但不能更改其他冻结元素的排名.标准的JQuery可排序不可分割功能允许通过更改冻结项目上方或下方的元素数量来更改冻结项目的等级.

我已经尝试通过拖动时"交换"列表元素手动执行此操作.即,当列表元素被拖动到非冻结元素上时,交换两个元素的位置.这给出了我想要的语义,但被拖动的项目在其新位置和当前"拖动"位置之间明显地"跳跃".(我希望它保持在当前的拖动位置;只有它在DOM中的位置才会改变.但是当DOM位置改变时,必须重新计算拖动偏移坐标.而且我不知道如何同时执行DOM位置更改并且原子地拖动偏移坐标变化,防止两者之间的重绘.目前,有时在两者之间重绘,并且元素可见(尽管很快)跳跃.)

编辑 这里是一个jsfiddle显示我的手动方法: 链接.玩了一会儿,你会注意到我提到的闪烁/跳跃.

Answer 1

我看了你的小提琴,有另一个想法,这是使用的一种方法sortable:在每个固定项目start的data对象中存储固定索引位置,然后在任何change,将固定项目移回原位.

$(function() {   
    $('#rankings').sortable({
        axis: 'y',
        items: '.sortable',
        start: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).data("fixedIndex", $(this).index());
            });
        },        
        change: function () {
            $(this).find("li:not(.sortable)").each(function () {
                $(this).detach().insertAfter($("#rankings li:eq(" + ($(this).data("fixedIndex")-1) + ")"));
            });
        }
    });
});

使用如下列表:

<ol id="rankings">
    <li class="sortable">Dog</li>
    <li class="">Cat</li>
    <li class="sortable">Parrot</li>
    <li class="sortable">Gerbil</li>
    <li class="sortable">Snake</li>
    <li class="">Goldfish</li>
</ol>

似乎工作.