useful drag and drop table rows

gistfile1.txt

                            

<ul class="draggable" >
<li>
	<td class="rule-info rule-op">
		<span class="gripicon"><i class="fas fa-grip-vertical"></i></span>
		<span class="ruleNum"> 2</span> 
	</td>
	<td>
	Other
	</td>
	<td>
	Some more too
	</td>
</li>
<li>
	<td class="rule-info rule-op">
		<span class="gripicon"><i class="fas fa-grip-vertical"></i></span>
		<span class="ruleNum"> 1</span> 
	</td>
	<td>
	Other
	</td>
	<td>
	Some more
	</td>
</li>
<li>
	<td class="rule-info rule-op">
		<span class="gripicon"><i class="fas fa-grip-vertical"></i></span>
		<span class="ruleNum"> 3</span> 
	</td>
	<td>
	Other
	</td>
	<td>
	Some more three
	</td>
</li>
</ul>
            
<style>
li {list-style: none; padding-left: 5px; }
.gripicon {margin-right: 5px;}
.gripicon:hover {opacity: 1; border-left: solid red 2px;}
.gripicon:active {cursor: grab;}
</style>
<script>

$( ".draggable" ).sortable( {
handle: ".gripicon", 
cursor: "grab", 
start: function (event,ui) { tabledragStart();},
update: function (event,ui) {tabledragEnd()} ,
//stop: function () {alert('stopped')}
} );
  
var dragRow;
function tabledragStart(){
  dragRow = $(event.target).closest('li');
  $(dragRow).css('background-color','#ACBCC5');
  $(dragRow).css('border-left','solid red 2px');
}
function tabledragEnd(){
  $(dragRow).css('background-color','transparent');
  $(dragRow).css('border','none');
  // renumber 
  $('.draggable .ruleNum').each(function (ix,  value) {
  	let num = ix+1;
  	$(this).text(' ' + num.toString());
  });
  $('.render-sites').trigger('click'); 
  console.log('render');
}

</script>