JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<td><img src="http://www.mricons.com/store/png/123231_42206_48_arrow_cursor_drag_icon.png"></td>
<td>1B</td>
<td>1C</td>
</tr>
<tr>
<td><button>2a</button></td>
<td>2B</td>
<td>2C</td>
</tr>
<tr>
<td><button>3a</button></td>
<td>3B</td>
<td>3C</td>
</tr>
<tr>
<td><button>4a</button></td>
<td>4B</td>
<td>4C</td>
</tr>
<tr>
<td><button>5a</button></td>
<td>5B</td>
<td>5C</td>
</tr>
<tr>
<td><button>6a</button></td>
<td>6B</td>
<td>6C</td>
</tr>
</table>
CSS
table {
cursor: move;
}
tr{
background:$f1f1f1;
border:1px solid gray;
padding:5px;
display:block;
}
td{
padding:0 5px;
}
JavaScript
$("table tbody").sortable({
handle: 'button',
cancel: ''
}).disableSelection();