JSFiddle - React, Tailwind, and code Playground

by urashita

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<table class="tableOne">
    <tbody>
        <tr><td>Row 1</td><td>ONE</td></tr>
        <tr><td>Row 2</td><td>TWO</td></tr>
        <tr><td>Row 3</td><td>THREE</td></tr>
        <tr><td>Row 4</td><td>FOUR</td></tr>
        <tr><td>Row 5</td><td>FIVE</td></tr>
    </tbody>
</table>
<br />
<table class="tableTwo">
    <tr><td>Row 1</td><td>FIRST</td></tr>
    <tr><td>Row 2</td><td>SECOND</td></tr>
    <tr><td>Row 3</td><td>THIRD</td></tr>
    <tr><td>Row 4</td><td>FOURTH</td></tr>
    <tr><td>Row 5</td><td>FIFTH</td></tr>
</table>

JavaScript

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