javascript - jQuery Sortable を使用したタブ + フィールドの並べ替えと保存

Question

タブを並べ替えたいのですが、タブ内のフィールドも並べ替えたいと思っています。フィールドをあるタブから別のタブにもドラッグできるようにしたい。

ユーザーが [保存] ボタンをクリックすると、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");
            });
        }
    });
});