JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<table border="1" id="formTable">
<thead>
<th>View</th>
<th>Page</th>
<th>Sheet #</th>
<th>Reason</th>
<th>Location</th>
</thead>
<tbody id="sortThis">
<tr>
<td style="text-align:center;">
<input type="button">
</td>
<td>1</td>
<td>
<select>
<option value="1">Sheet 1</option>
<option value="2" selected>Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Policy addition</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;">
<input type="button">
</td>
<td>2</td>
<td>
<select>
<option value="1" selected>Sheet 1</option>
<option value="2">Sheet 2</option>
<option value="3">Sheet 3</option>
<option value="4">Sheet 4</option>
</select>
</td>
<td>Privacy Notice</td>
<td>
<select>
<option value="1" selected>Policy</option>
<option value="2">Pocket</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;">
<input type="button">
</td>
<td>3</td>
...
CSS
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
JavaScript
$('tbody#sortThis').sortable({
start: function (event, ui) {
//Let's set the starting position of an row in the table to ensure the correct row index
var start_pos = ui.item.index() + 1;
ui.item.data('start_pos', start_pos);
},
change: function (event, ui) {
//When the item postion is changed while dragging a item, get it's position
var start_pos = ui.item.data('start_pos');
//get the direction of the drag motion
var dragDirection = start_pos < ui.placeholder.index() ? "down" : "up";
ui.item.data('drag_direction', dragDirection);
},
stop: function (event, ui) {
//get the table where the sorting is happening
var thisTable = document.getElementById('formTable');
//get the row index of where the dragged row has stopped
var movedRowIndex = (ui.item.index() + 1);
//get the page # cell and update the text to the stopped location
var pageNumberCell = $(thisTable.rows[movedRowIndex].cells[1]);
pageNumberCell.text((ui.item.index() + 1));
//get the direction 'up' or 'down' that the record was dragged.
var drag_direction = ui.item.data('drag_direction');
//if the record was drageed down the table, update record page#s above
if (drag_direction == 'down') {
for (var i = 1; i < thisTable.rows.length; i++) {
if (i < movedRowIndex) {
$(thisTable.rows[i].cells[1]).text(i);
}
}
}
//if the record was drageed up the table, update record page#s below
if (drag_direction == 'up') {
for (var i = 1; i < thisTable.rows.length; i++) {
if (i > movedRowIndex) {
$(thisTable.rows[i].cells[1]).text(i);
}
}
}
}
});
$('tbody#sortThis').disableSelection();