jQuery UI Tabs：ドラッグアンドドロップAJAXの並べ替えを実装する方法は？

Question

私はjQuery UIタブウィジェットを使用しており、ドラッグ＆ドロップの並べ替えを実装したいと考えています。私はそれらを表示する順序を決定するそれぞれのタブの "表示ランク"値を持っています。並べ替えられたときにそれらのタブの順序を保存できる必要があるので、いくつかの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を指定しなければならないということです。たとえば：

$_POST['MyTabs'] 

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

：アプリケーションがPOSTデータを受信したとき

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

その後、それはこのようになります配列となります