Jquery UI 可排序网格固定项目

Question

我整天都在试图弄清楚如何制作一个带有固定/粘性/锁定项目的 jquery ui 可排序网格。

在堆栈和谷歌上搜索已经让我走到了这一步：

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

https://jsfiddle.net/mvirik/9ear1n3o/17/

这似乎工作正常，但如果我将“固定”类添加到第一项或最后一项，一切都会崩溃。

任何帮助都会非常棒。谢谢！

Answer 1

这似乎可以解决问题：

 $(function() {
    $("#sortable").sortable({
        start: function () {
            $(this).find(".pinned").each(function () {
          $(this).data("fixedIndex", $(this).index());
            });
        },        
        change: function (event, ui) {
            $(this).find(".pinned").each(function () {
        if($(this).data("fixedIndex") != 0) {
            $(this).detach().insertAfter($("#sortable li:eq(" + ($(this).data("fixedIndex")-1) + ")"));
        } else {
            $(this).detach().insertBefore($("#sortable li:eq(" + ($(this).data("fixedIndex")) + ")"));
        }
            });
        }
    });
});

尝试 54：https://jsfiddle.net/mvirik/9ear1n3o/54/ :)

如果有人知道更好的方法，请随时发表评论。

编辑：尽管如此，我也希望能够移动红色项目。这仍然无法正常工作。