1

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

在此处输入图像描述

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

在此处输入图像描述

我做了一些研究，似乎可以使用 jQuery Sortable (Connect lists with 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");
            });
        }
    });
});
4

1 回答 1

1

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

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

我有一段时间没有看到可排序的 API，但这也会对您有所帮助。http://johnny.github.io/jquery-sortable/

于 2013-10-04T15:55:17.357 回答