JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/dfsq/trSortable/master/jquery.trsortable.js"></script>
<table id="records">
    <thead>
        <tr class="nodrop">
            <td colspan="3">Rows and records</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Record 1 <span class="trs-handler"></span></td>
            <td>Record 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Record 2 <span class="trs-handler"></span></td>
            <td>Record 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Record 3 <span class="trs-handler"></span></td>
            <td>Recrod 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Record 4 <span class="trs-handler"></span></td>
            <td>Record 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Record 5 <span class="trs-handler"></span></td>
            <td>Record 5</td>
        </tr>
    </tbody>
</table>

CSS

table {border-collapce: collapse;}
td {
    background-color: #dcdcdc;
    padding: 3px 5px;
    border: 2px #FFF solid;
}
.trs-ondrag {}
.trs-ondrag td {background-color: #8fbc8f;}
.trs-handler {
    background-color: #ff8c00;
    width: 10px;
    height: 10px;
    display: inline-block;
    cursor: move;
}

JavaScript

$('#records').trSortable({
    dragHandler: '.trs-handler',
    onDrop: function(tbody, row) {
        console.log(tbody, row);
    }
});