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

Question

我正在寻找一种方法来获得类似 JQuery 的可排序列表 (link)，但其中一些元素位于固定的不可拖动位置。

使某些元素不可拖动很简单，但它们的位置不会保持固定，因为它们上方和下方的可拖动元素的数量可以改变。

更具体地说： 我有一个按等级排列的 10 个项目的列表。我希望用户能够通过拖动（可排序列表）来更改某些项目的排名，但不能更改其他冻结元素的排名。标准的 JQuery 可排序不可拖动功能允许通过更改冻结项上方或下方的元素数量来更改冻结项的排名。

我尝试在拖动时通过“交换”列表元素手动执行此操作。即，当一个列表元素被拖动到一个非冻结元素上时，两个元素的位置被交换。这给出了我想要的语义，但是被拖动的项目明显地在其新位置和当前“拖动”位置之间“跳跃”。 （我希望它保持在当前的拖动位置；只有它在 DOM 中的位置应该改变。但是当 DOM 位置改变时，必须重新计算拖动偏移坐标。而且我不知道如何同时改变 DOM 位置并拖动偏移坐标原子地更改，防止两者之间重绘。目前，有时两者之间会发生重绘，并且元素明显（尽管很短）跳跃。）

编辑 这是一个显示我的手动方法的 jsfiddle： link。玩一会儿，你会注意到我提到的闪烁/跳跃。

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>

Seems to work。

Answer 2

我想我可能已经破解了它 - http://jsfiddle.net/q5c4Y/3/。虽然是一个很大的挑战。在此过程中有些事情有所帮助

• 使用更结构化的标记
• 使用 droppable 的 over 事件来交换列表项，而不是 drop 事件（使用 dragstop 代替）
• 在内部项目上设置一些定位，以便在更改其父元素后将它们保持在正确的位置

虽然，阅读上面@graphicdivine 的回答，看起来你真正需要的是 jquery ui sortable

Answer 3

1) 如果您不想更改的项目都在列表的顶部和/或底部，您可以在列表之外创建这些项目，从而只允许对其他项目进行排序并保留排名不可变的。

2) 你可以使用“停止”事件来检查你想要的排名是否被保留了？即，检查是否仍然只有 3 个项目高于第 4 排名项目，如果没有，将新的“第 4”移动到具有第 4 不可变排名的项目之下？基本上，在物品被拖到非法地点后强制重新转移物品？