JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table id="myTable">
  <thead>
    <tr><th>ID</th><th>Name</th><th>Details</th></tr>
  </thead>
  <tbody class="sort">
    <tr id="1"><td>1</td><td>Name1</td><td>Details1</td></tr>
    <tr id="2"><td>2</td><td>Name2</td><td>Details2</td></tr>
    <tr id="3"><td>3</td><td>Name3</td><td>Details3</td></tr>
    <tr id="4"><td>4</td><td>Name4</td><td>Details4</td></tr>
  </tbody>
</table>

JavaScript

$(function() {
  $('tbody.sort').sortable({
    //observe the update event...
    update: function(event, ui) {
      //create the array that hold the positions...
      var order = []; 
      //loop trought each li...
      $('.sort tr').each( function(e) {

        //add each li position to the array...     
        // the +1 is for make it start from 1 instead of 0
        order.push( { id: parseInt($(this).attr('id')), order: ( $(this).index() + 1 )} );
      });
      // join the array as single variable...
      var positions = order.join(';');
      console.log( order );
    }
  });
});