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><th>Delete</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>
				<td>
					<span class="delete"><a href="#">Delete</a></span>
				</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>
				<td>
					<span class="delete"><a href="#">Delete</a></span>
				</td>				
			</tr>
			<tr>
					<td style="text-align:center;"><input type="button"></td>
					<td>3</td>
					<td>
					<select>
						<option value="1">Sheet 1</option>
						<option value="2">Sheet 2</option>
						<option value="3" selected>Sheet 3</option>
						<option value="4">Sheet 4</option>
					</select>					
				</td>
				<td>Disclosure</td>
				<td>
					<select>
						<option value="1">Policy</option>
						<option value="2" selected>Pocket</option>
					</select>					
				</td>			
				<td>
					<span class="delete"><a href="#">Delete</a></span>
				</td>				
			</tr>  
		<tr>
					<td style="text-align:center;"><input...

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

			rePage(thisTable);
		}
	});
	
	var rePage = function(thisTable){
		for (var i=1; i < thisTable.rows.length; i++){ 
			$(thisTable.rows[i].cells[1]).text(i);
		}
	};
	
	$('span.delete').click(function() {  
		var thisTable = document.getElementById('formTable');
			$(this).closest('tr').find('td').fadeOut(1000, 
					function(){ 
							$(this).parents('tr:first').remove(); 
							rePage(thisTable);							
					});    
			return false;
	});
	
	$('tbody#sortThis' ).disableSelection();