JSFiddle - React, Tailwind, and code Playground
HTML
<script src=http://code.jquery.com/ui/1.11.4/jquery-ui.js></script>
<table class="sortable" border=1 cellspacing=0 width=300>
<tbody>
<tr class=nosort><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
<tr><td>aa1</td><td>aa2</td><td>aa3</td></tr>
</tbody>
</table>
<br><br><br><br>
<table class="sortable" border=1 cellspacing=0 width=300>
<tbody>
<tr...
CSS
td { padding: 0; font-size: 20px; cursor: move; }
.nosort td { font-weight: bold; cursor: default; }
JavaScript
$(function() {
$( ".sortable tbody" ).sortable({"axis": "y", "cursor": "move", 'tolerance': 'pointer', 'cursorAt': { top: 20, left: 20 }, 'scroll': false,
"connectWith": $('.sortable tbody'),
"items" : 'tr:not(.nosort)',
"helper": function(ev,tr)
{
var orig = tr.children();
var helper = tr.clone();
helper.children().each(function(i)
{
$(this).wrapInner('<div></div>').find('div').width(orig.eq(i).width());
$(this).width(orig.eq(i).outerWidth()).css({'background-color':'#eee'});
});
return helper;
}
});
$('body').scrollTop(340);
});