Sorting and Saving Tabs + Fields using jQuery Sortable

Question

I want to sort my tabs and I also want to sort the fields inside the tabs. I want to be able to drag the fields from one tab to the other as well.

When the user clicks on the Save button I want to get a json string. Something similar to the following:

I did some research and it seems that it is possible using jQuery Sortable (Connect lists with Tabs). Can someone post a decent piece of html+javascript please? Thank you.

The following code I wrote is a disaster.

    $(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

Use the "ConnectWith" property when defining the sortable bind. This will allow you to sort/drop items form list a to list b.

In order to save their states, you can take the items of the list, save them as array in localStorage, and then compare them to the saved localstorage fields during page load. When you load the page, you compare the current list order, to the saved order, and if different, append them to the new list. When you are done, the new list has all of the items, but in the saved order.

I have not seen API for sortable in a while, but this will also help you out. http://johnny.github.io/jquery-sortable/