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

Question

嘿，我有两个行数相同的表。例如，如果我尝试对 tableOne 中的一行(例如 row-3)进行排序，则其他表(tableTwo)中的确切行(row-3)也应该是可排序的。有什么办法可以实现这一点吗？

我注意到可排序的 Jquery UI wwidget，当我们有两个表时，我们可以将行拖放到表中或拖放到另一个表中。但我的情况与上面所说的不同。请让我知道任何解决方法。

Answer 1

在看到它被搁置之前我已经在处理这个问题了，所以我只添加更新的 jsfiddle。简要说明，使用窗口鼠标悬停事件来移动 tableTwo 行，使用从 tableOne 到 tableTwo 位置差异计算的偏移量。在可排序开始事件中，跟踪移动的行，这可以在窗口鼠标悬停事件中使用。然后，在可排序更改事件中，移动 tableTwo 中的占位符以反射(reflect) tableOne 中的更改。最后，在可排序的 beforeStop 事件中，重置可排序开始事件中保存的“状态”。

https://jsfiddle.net/s73adk01/10/

JS

$(".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);
    }
});

原始答案:

可能是一种“更干净”的方法，但这可以完成工作。想法是给每个表中的每一行一个“行id”，并在sortable的beforeStop事件中，从tableOne中获取移动元素的位置，通过行id找到tableTwo中对应的行，然后将tabelTwo的行移动到相同的位置该表的一行移至。

https://jsfiddle.net/s73adk01/4/

HTML

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

JS

$(".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);           
    }
});