JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item1</td>
      <td>Item1</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Item2</td>
      <td>Item2</td>
      <td>B</td>
    </tr>
    <tr>
      <td>Item3</td>
      <td>Item3</td>
      <td>C</td>
    </tr>
    <tr>
      <td>Item4</td>
      <td>Item4</td>
      <td>D</td>
    </tr>
    <tr>
      <td>Item5</td>
      <td>Item5</td>
      <td>E</td>
    </tr>
  </tbody>
</table>

CSS

.selected {
  background-color: green;
}

JavaScript

jQuery("#sort tbody").on('click', 'tr', function() {
   $(this).toggleClass('selected');
 });


 $.ui.sortable.prototype._rearrange = function(event, i, a, hardRefresh) {
   a ? a[0].appendChild(this.placeholder[0]) : (i.item[0].parentNode) ? i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling)) : i.item[0];
   this.counter = this.counter ? ++this.counter : 1;
   var counter = this.counter;
   this._delay(function() {
     if (counter === this.counter) {
       this.refreshPositions(!hardRefresh);
     }
   });
 }
 jQuery('#sort tbody').sortable({
   connectWith: "tbody",
   delay: 150,
   revert: 0,
   helper: function(e, item) {

     var helper = $('<tr/>');
     if (!item.hasClass('selected')) {
       item.addClass('selected').siblings().removeClass('selected');
     }
     var elements = item.parent().children('.selected').clone();
     item.data('multidrag', elements).siblings('.selected').remove();
     return helper.append(elements);
   },
   stop: function(e, info) {
     info.item.after(info.item.data('multidrag')).remove();
   },
   sort: function(e, ui) {
     jQuery("tr").removeClass('selected');
   }
 });