JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.j"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="cab_itenary">

</ul>

CSS

td {
    padding: 5px 10px;
    border: solid 1px
}

JavaScript

let itenary = [{placeid:'123',address:'Bordman'},
                 {placeid:'124',address:'Bardman'},
                 {placeid:'125',address:'Burdman'}]
                 $('#cab_itenary').append('<li class="unsortable">Head</li>');
                 itenary.forEach((item) => {
                 $('#cab_itenary').append('<li>'+item.address+'</li>');
                 });
                 $('#cab_itenary').append('<li class="unsortable">Footer</li>');
$( "#cab_itenary" ).sortable({ 
     cancel: ".unsortable",
     start: function(evt, ui) {
       ui.item.data('pos', ui.item.index());
     },
  stop: function(evt, ui) {
    itenary = moveIndex(itenary,ui.item.data('pos') - 1,ui.item.index() - 1)
    console.log(itenary);
  }
});


function moveIndex(array,fromIndex,toIndex){
const element = array.splice(fromIndex, 1)[0];

  console.log(element);

  itenary.splice(toIndex, 0, element);
	return itenary
  
}