jqueryui选项卡：如何实现拖放AJAX重新排序？

我正在使用jQueryUITabs小部件，并希望实现拖放重新排序。我在每个选项卡上都有一个“显示等级”值，它决定了它们的显示顺序。我需要能够保存这些选项卡在重新排序时的顺序，所以我需要做一些AJAX

---

你能给我一个简短的教程，告诉我如何做到这一点吗？或者让我看一个教程，其中解释了如何执行此操作？

您可以尝试添加jQuery UI可排序，如下所示：

$(".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"
                });
    }
});

$_POST['MyTabs']

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

“mode:“abort”是ajax调用的扩展：

---

这会中止以前的调用，只保留当前的调用，因为不需要保存过时的排序。

实际上非常简单。首先，选择

.ui选项卡nav

，并告诉它们可在x轴上排序。然后可以序列化选项卡顺序。然后通过AJAX调用将数据发送到应用程序

$('#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'
        });
    }
});

唯一棘手的部分是，您必须以

groupname\u identifier

的格式在列表项上指定一个ID。例如：

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