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

Question

我正在使用jQuery UI Tabs小部件，并且想要实现拖放重新排序。我在每个选项卡上都有一个“显示排名”值，它决定了显示它们的顺序。我需要在重新排序时保存这些选项卡的顺序，所以我需要做一些AJAX。

你能给我一个关于如何实现这个目标的简短教程吗？或者将我指向一个解释如何做到这一点的教程？

Answer 1

你可以尝试加入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" 
       }); 
    } 
}); 

的“模式：‘中止’”是Ajax调用的扩展：http://www.onemoretake.com/2009/10/11/ajaxqueue-and-jquery-1-3/

这将中止先前的电话，只保留目前，因为不需要保存已经过时的分类。

Answer 2

其实很简单。首先，您选择.ui-tabs-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_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> 

当你的应用程序收到POST数据之后，这将是一个数组，看起来像这样：

$_POST['MyTabs'] 

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