JSFiddle - React, Tailwind, and code Playground

by urashita

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li>
  <li><a data-target="#profile" data-toggle="tab">Profile</a></li>

</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">

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

  <div class="tab-pane" id="profile">
    <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>

  </div>


</div>

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

  }
});