JSFiddle - React, Tailwind, and code Playground

by ninadpachpute

HTML

<script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/jquery-ui-1.7.1.custom.min.js"></script>

<table class="sortable">
<tr><td>Row-1</td></tr>
<tr><td>Row-2</td></tr>
<tr><td>Row-3</td></tr>
<tr><td>Row-4</td></tr>
<tr><td>Row-5</td></tr>
</table>

CSS

table { width:96%; margin:2%; }
tr { background-color:#888; }
tr:hover { cursor:move; }
td { padding:5px 10px; background-color:#ccc; }

JavaScript

$(document).ready(function(){
 $(function() {
  $(".ortable").sortable({ opacity: 0.6, cursor: 'move', update: function() {
   var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
   $.post("updateDB.php", order, function(theResponse){
    $("#contentRight").html(theResponse);
   });                                                              
  }                                  
  });
 });
});    

    
    $(function() {
        $(".sortable").sortable();
    });