JSFiddle - React, Tailwind, and code Playground

by Mark McFadden

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();