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