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/

这似乎工作正常，但如果我添加＆＃34;固定＆＃34;类到第一个或最后一个项目，它都会崩溃。

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

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/：）

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

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

Jquery UI可排序网格固定项目

1 个答案: