使用jQuery Sortable对选项卡+字段进行排序和保存

Question

我想对标签进行排序，我还要对标签内的字段进行排序。我希望能够将字段从一个选项卡拖到另一个选项卡中。

当用户点击“保存”按钮时，我想获得一个json字符串。类似于以下内容：

我做了一些研究，似乎可以使用jQuery Sortable（连接列表和Tabs）。有人可以发一个体面的HTML + JavaScript吗？谢谢。

我写的以下代码是一场灾难。

    $(function () {
    $("#tabs").tabs().find(".ui-tabs-nav").sortable({
        axis: "x",
        update: function(event, ui) {
            debugger;
        }
    });

    $(".fieldSortableList").sortable().disableSelection();

    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li", $tabs).droppable({
        accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (event, ui) {
            var $item = $(this);
            var $list = $($item.find("a").attr("href")).find(".connectedSortable");
            ui.draggable.hide("slow", function () {
                $(this).appendTo($list).show("slow");
            });
        }
    });
});

Answer 1

定义可排序绑定时使用“ConnectWith”属性。这将允许您将表单列表a中的项目排序/删除到列表b。

为了保存状态，您可以获取列表中的项目，将它们保存为localStorage中的数组，然后在页面加载期间将它们与保存的localstorage字段进行比较。加载页面时，将当前列表顺序与保存的顺序进行比较，如果不同，则将它们附加到新列表。完成后，新列表包含所有项目，但保存顺序。

我暂时没有看到可排序的API，但这也会帮助你。 http://johnny.github.io/jquery-sortable/