Liste item

Liste

by tibum

HTML

<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>

</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

var $sortableList = $("#sortable");

var sortEventHandler = function(event, ui) {
  console.log("New sort order!");

  var listElements = $sortableList.children();

  console.log(listElements); // [ <li>, <li>, ... ]

  var listValues = [];

  listElements.each(function(element) {
    listValues.push(this.innerText);
    //console.log(element);
  });

  console.log(listValues);
};


$(document).ready(function() {
  $("#sortable").sortable({
    stop: sortEventHandler
  });
  $("#sortable").disableSelection();
}); //ready