JSFiddle - React, Tailwind, and code Playground

jquery UI sortable

by abubelinha

HTML

<li><a target=_blank href="https://stackoverflow.com/questions/5320194/get-order-of-list-items-in-a-jquery-sortable-list-after-resort">https://stackoverflow.com/questions/5320194/get-order-of-list-items-in-a-jquery-sortable-list-after-resort</a></li>
<hr>
<div class="demo">
<ul id="sortable">
    <li id="set_1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li id="set_2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li id="set_3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li id="set_4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li id="set_5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li id="set_6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li id="set_7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<button id=getOrder>
see order
</button>
</div><!-- End demo -->

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }

JavaScript

$(document).ready(function(){
    $("#sortable").sortable({
        stop : function(event, ui){
          //alert($(this).sortable('serialize'));
          // https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery
          $("#getOrder").css({"backgroundColor": "red", "color": "white"});
        }
    });
  $("#sortable").disableSelection();
	$("#getOrder").click(function() {
  	alert($("#sortable").sortable('serialize'));
    // https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery
    $("#getOrder").css({"backgroundColor": "", "color": "black"});
  }
  );  
});//ready