jQuery UI Tabs: How to implement drag and drop AJAX reordering?

I am using the jQuery UI Tabs widget and would like to implement drag and drop reordering. I have a "display rank" value on each of those tabs which determines which order to display them in. I need to be ab开发者_Go百科le to save the order of those tabs when they are reordered, so I need to do some AJAX.

Can you give me a brief tutorial on how I can achieve this? Or point me to a tutorial which explains how to do this?

---

It's actually pretty simple. First, you select .ui-tabs-nav and tell them to be sortable on the x axis. Then you can serialize the tab order. Then send that data to your application via an AJAX call.

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

The only tricky part is that you must specify an ID on the list items in the format of groupname_identifier. For example:

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

Then when your application receives the POST data, it will be an array that looks like this:

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)

---

You could try adding jQuery UI Sortable, like this:

$(".list").sortable({
    handle: ".sortableHandle", // Selector for the element that is dragable
    update: function (event, ui)
    {
        // Update the sort of the list via AJAX
        var IdArray = "";
        $(".sortable tr").each(function ()
        {
            IdArray += $(this).attr("id").split("sortList_")[1] + ","; // the tr has an id with this format: "sortList_ID"
        });

        $.ajax(
                {
                    url: "UpdateListSorting.html",
                    data: { "listSorting": IdArray },
                    type: "POST",
                    mode: "abort"
                });
    }
});

The 'mode: "abort"' is an extension of the ajax call: http://www.onemoretake.com/2009/10/11/ajaxqueue-and-jquery-1-3/

This aborts previous calls and only keeps the current, since there is no need to save a sorting that is obsolete.