Сортировка и сохранение вкладок + полей с помощью jQuery Sortable

Я хочу сортировать свои вкладки, а также хочу сортировать поля внутри вкладок. Я хочу иметь возможность перетаскивать поля с одной вкладки на другую.

Когда пользователь нажимает кнопку "Сохранить", я хочу получить строку json. Что-то похожее на следующее:

Я сделал некоторые исследования, и кажется, что это возможно с помощью jQuery Sortable (Connect list 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");
            });
        }
    });
});