JSFiddle - React, Tailwind, and code Playground

jQuery - Draggable - drag drop reorder list

by Ben Clayton

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 
<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

CSS

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
  li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$(function() {
    
      var arr=[{type:1},{type:2,prop:{width:33,height:44,align:'left'}},{type:3},{type:4},{type:5}];
      
    $( "#sortable" ).sortable({
        revert: true,
        stop:function(event,ui){
            debugger;
            console.log(ui.item.data('node'))
        }
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
        //stop:function(event,ui){console.log($(this).data('node'))}
    });
    $( "#sortable" ).on( "dragstop", function( event, ui ) {} );
    
      $( "ul, li" ).disableSelection();
      $("li.ui-state-default").each(function(idx){
          $(this).data('node',arr[idx]);
      });  
      
  });