Question

嘿，我有两个行数相同的表。例如，如果我尝试在tableOne中对行（比如第3行）进行排序，则其他表（tableTwo）中的确切行（第3行）也应该是可排序的。有没有办法实现这一目标。

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

Answer 1

在看到它被搁置之前我已经处理了这个问题，所以我只是添加更新的jsfiddle。简要说明，使用window mouseover事件来移动tableTwo行，使用从tableOne到tableTwo位置差异计算的偏移量。在可排序的启动事件中，跟踪可在窗口鼠标悬停事件中使用的移动行。然后，在sortable change事件中，在tableTwo中移动占位符以反映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获取被移动元素的位置，在tableTwo中找到相应的行按行id，然后将tabelTwo的行移动到相同的位置tableOne行移动到。

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

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

1 个答案: