JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<ul id="draggable" class="connectedSortable" style="cursor:pointer;">
  <li class="ui-state-default">Suburb</li>
  <li class="ui-state-default">City</li>
  <li class="ui-state-default">Province</li>
</ul>
<table width="300" border="0" cellspacing="0" cellpadding="0" class="tblsort">
  <tbody>
    <tr>
      <td>1</td>
      <td>aa</td>
    </tr>
    <tr>
      <td>2</td>
      <td>bb</td>
    </tr>
    <tr>
      <td>3</td>
      <td>cc</td>
    </tr>
  </tbody>
</table>

CSS

* {
   box-sizing: border-box;
   font-family: sans-serif;
 }
 
 #draggable {
   border: 1px solid #CCC;
   width: 220px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   float: left;
   margin-bottom: 20px;
 }
 
 #draggable li {
   margin: 10px;
   padding: 2px 5px;
 }
 
 .tblsort {
   border: 1px solid #ccc;
   border-spacing: 10px;
   border-collapse: separate;
   clear: both;
   cursor: grab
 }
 
 .tblsort td {
   border: 1px solid #ccc;
   padding: 2px 5px;
   cursor: ns-resize
 }
 
  .tblsort td:nth-child(1) {
   width: 30px;
 }

JavaScript

$(function() {

   $("#draggable").draggable({
     revert: true,
     revertDuration: 0
   });
   $("#draggable").droppable({
     drop: function(event, ui) {
       var table = $(this);
       $(ui.draggable).find('td:nth-child(2n)').each(function(i) {
         table.find('li:eq(' + i + ')').text($(this).text());
       })
     }
   });
   
   $(".tblsort").droppable({
     drop: function(event, ui) {
       var table = $(this);
       $(ui.draggable).find('li').each(function(i) {
         table.find('td:nth-child(2n):eq(' + i + ')').text($(this).text());
       })
     }
   });

   $(".tblsort tbody").sortable({
     helper: function(e, ui) {
       ui.children().each(function() {
         $(this).width($(this).width());
       });
       return ui;
     },
     update: function(event, ui) {
       $(this).find('td:nth-child(2n+1)').each(function(i) {
         $(this).text(i + 1);
       });
     }
   });
   $(".tblsort").draggable({
     revert: true,
     revertDuration: 0
   });

 });