如何在两个不同的选项卡上同步使用可排序的表(jQuery数据表)

Question

如何在两个不同的选项卡上同步使用可排序的表(jQuery数据表)。

这是我的jsfiddle.

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

如果您在摘要选项卡中更改了订单，我希望在详细信息选项卡中自动更改订单。

提前感谢

Answer 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);

}
});