Jquery 相对于另一个表拖放表中的行

嘿，我有两张相同行数的桌子。例如，如果我尝试对tableOne中的一行（比如第3行）进行排序，那么其他表（tableTwo）中的确切行（第3行）也应该是可排序的。有没有办法做到这一点

---

我注意到了可排序的jQueryUIWWIDGET，在这里，我们可以将表中的行拖放到另一个表中，或者在有两个表时将行拖放到另一个表中。但我的情况与上述不同。请让我知道任何解决方法。

在看到它被搁置之前，我已经对此进行了研究，所以我将添加更新的JSFIDLE。简要说明，使用window mouseover事件，使用从tableOne到tableTwo位置差计算的偏移量，将tableTwo移动两行。在可排序开始事件中，跟踪移动的行，这可用于窗口鼠标悬停事件。然后，在可排序更改事件中，在表2中移动占位符以反映表1中的更改。最后，在sortable beforeStop事件上，重置保存在sortable start事件中的“状态”

JS

---

那很好。在我尝试一个小问题之前，我的情况可能适用：当前您正在根据表中的行移动更改行。我们是否有可能在拖放的同时使行与其他行一起移动。我相信是这样，我认为您需要在window mousemove事件中执行此操作，因为我不确定sortable是否有“内置”方式来执行此操作。

$(".tableOne tr").each(function (idx) {
    if (idx > $(".tableTwo tr").length) 
        return;
    var $tableTwoTr = $(".tableTwo tr").eq(idx);

    $(this).attr("data-row-id", idx);
    $tableTwoTr.attr("data-row-id", idx);
});

var isDragging = false;
var $rowToDrag = null;
var $curUIHelper = null;
var $curPlaceholder = null;
var $curTableTwoPlaceholder = null;

$(window).on("mousemove", function () {
    if (!isDragging)
        return;

    var topDiff = $(".tableOne").offset().top - $(".tableTwo").offset().top;
    var leftDiff = $(".tableOne").offset().left - $(".tableTwo").offset().left;

    $rowToDrag.css("position", "absolute");
    $rowToDrag.offset({ 
        top: $curUIHelper.offset().top - topDiff,
        left: $curUIHelper.offset().left - leftDiff
    });
});

$(".tableOne tbody").sortable({
    start: function(e, ui) {
        isDragging = true;

        var rowId = $(ui.helper).attr("data-row-id");

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

        $curUIHelper = $(ui.helper);
        $curPlaceholder = $(ui.placeholder);

        $curTableTwoPlaceholder = $curPlaceholder.clone();
        $curTableTwoPlaceholder.insertBefore($rowToDrag);
    },
    change: function(e, ui) {
        var $placeholderNextRow = $curPlaceholder.next();

        if ($placeholderNextRow.length <= 0) {
            // At the end
            $curTableTwoPlaceholder.insertAfter($(".tableTwo tbody tr").last());
        }
        else {
            var nextRowID = $placeholderNextRow.attr("data-row-id");

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

            $curTableTwoPlaceholder.insertBefore($tableTwoNextRow);
        }
    },
    beforeStop: function(e, ui) {    
        isDragging = false;

        $rowToDrag.css({
            position: "static",
            left: 0,
            top: 0
        });

        $curTableTwoPlaceholder.remove();

        $rowToDrag = null;
        $curUIHelper = null;
        $curPlaceholder = null;
        $curTableTwoPlaceholder = null;

        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 {
            $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);
    }
});

<table class="tableOne">
    <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
        <tr><td>Row 3</td></tr>
        <tr><td>Row 4</td></tr>
        <tr><td>Row 5</td></tr>
    </tbody>
</table>
<br />
<table class="tableTwo">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <tr><td>Row 5</td></tr>
</table>

$(".tableOne tr").each(function (idx) {
    if (idx > $(".tableTwo tr").length) 
        return;
    var $tableTwoTr = $(".tableTwo tr").eq(idx);

    $(this).attr("data-row-id", idx);
    $tableTwoTr.attr("data-row-id", idx);
});

$(".tableOne tbody").sortable({
    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 {
            $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);           
    }
});