JSFiddle - React, Tailwind, and code Playground

api to get and set element position in asortable elements stack jquery.cookie

by Akram kamal

HTML

<script src="//cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js"></script>
<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

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

jQuery(function ($) {
    $.cookie.json = true;
    var list = $.cookie('list')
    var children = $("#sortable").children().each(function (i) {
        $(this).data('number', i)  // number the children
    })
    if (list && list.length) { // cookie order
        $.each(list, function (v, i) {
            $("#sortable").append(children.eq(i))
        })
    }
    $("#sortable").sortable({
        update: function (e, ui) {
            var list = $(this).children().map(function () {
                return $(this).data('number')

            }).get()
            $.cookie('list', list) // save new order
        }
    }).disableSelection()
});