2つの異なるタブ（jQueryデータテーブル）で同期可能にソート可能なテーブルを操作する方法

Question

ソート可能なテーブルを2つの異なるタブ（jQueryデータテーブル）で同期して処理する方法。

は、ここに私のjsfiddle.

$(function() { 
    var tabs = $("#tabs").tabs();  
    $("#summary_body, #detail_body").sortable().disableSelection(); 
}); 

サマリー]タブの順序を変更した場合、私は、詳細タブに自動的に順番を変更したいです。
ありがとうございました

Answer 1

私の質問に非常に似た解決策が見つかりました。私は1つの行をドラッグして、上部の場所にドロップしようとした場合

Drag and drop rows in a table with respect to another table

しかし、これらのJSFiddle答えが正常に動作しません。

ここは私の修正です。 JSFiddle

var curPosition; 
$(".tableOne tbody").sortable({ 
start: function (e, ui) { 
    curPosition = $(".tableOne tr:not(.ui-sortable-placeholder)") 
       .index($(ui.helper)); 
    }, 
beforeStop: function(e, ui) {  
    var rowId = $(ui.helper).attr("data-row-id"); 

    var newPosition = $(".tableOne tr:not(.ui-sortable-placeholder)") 
     .index($(ui.helper)); 

    var $tableTwoRowToMove = $(".tableTwo tr[data-row-id='" + rowId + "']"); 

    if (newPosition == 0) { 
     $tableTwoRowToMove.insertBefore($(".tableTwo tr").first()); 
    } 
    else { 
     if (curPosition > newPosition) { 
      $tableTwoRowToMove.insertBefore($(".tableTwo tr").eq(newPosition)); 
     } else if (curPosition < newPosition) { 
      $tableTwoRowToMove.insertAfter($(".tableTwo tr").eq(newPosition)); 
     } 
    } 

    // Flash so we can easily see that it moved. 
    $(ui.helper) 
     .css("background-color", "orange") 
     .animate({ backgroundColor: "white" }, 1000); 

    $tableTwoRowToMove 
     .css("background-color", "yellow") 
     .animate({ backgroundColor: "white" }, 1500); 

} 
});