İki farklı sekmede (jQuery veri kümeleri) senkronize olarak nasıl tablo oluşturulabilir

Question

İki farklı sekmede (jQuery veri kümeleri) senkronize olarak nasıl tablo oluşturabilirim?

İşte benim jsfiddle.

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

özet sekmesinde düzeni değişti, ben detay sekmesinde otomatik sırasını değiştirmek isterdiniz olduğunu.
Şimdiden teşekkürler.

Answer 1

Sorularıma oldukça benzer bir çözüm buldum. Ben bir satır sürüklemek ve üst yere bırakın çalışırsa

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

Ancak bu JSFiddle cevap gayet çalışmıyor.

İşte benim düzeltmem. 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); 

} 
});