JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<ul id="myLayers">
        <li class="ui-state-default" id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 1</li>
        <li class="ui-state-default" id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 2</li>
        <li class="ui-state-default" id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 3</li>
        <li class="ui-state-default" id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 4</li>
        <li class="ui-state-default" id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 5</li>
        <li class="ui-state-default" id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 6</li>
        <li class="ui-state-default" id="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Layer 7</li>
    </ul>
<b>Status:</b>
<div id="status"></div>

CSS

#myLayers { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#myLayers li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
#myLayers li span { position: absolute; margin-left: -1.3em; }
#myLayers li.fixed{cursor:default; color:#959595; opacity:0.5;}

JavaScript

$(function() {
  var idsInOrder=$("#myLayers").sortable({
    update: function(event, ui) {
        var layers = [];
        $('#myLayers li').each( function(e) {
            layers.push( ( $(this).index() + 1 )  + '= Layer ' +  $(this).attr('id'));
        });
        var positions = layers.join("<br/>")
        $("#status").html(positions);
      }

  });
  $("#myLayers").disableSelection();
});