Order

by Dmytro Tsiniavskyi

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<ul id="sortable">
  <li class="ui-state-default" id="li-1">
    <span>Item 1</span>
  </li>
  <li class="ui-state-default" id="li-2">
    <span>Item 2</span>
  </li>
  <li class="ui-state-default" id="li-3">
    <span>Item 3</span>
  </li>
  <li class="ui-state-default" id="li-4">
    <span>Item 4</span>
  </li>
  <li class="ui-state-default" id="li-5">
    <span>Item 5</span>
  </li>
</ul>

<p id="order"></p>
<p id="status"></p>
<p id="result"></p>

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({
    start: function(event, ui) {
      setStatus('start');
      var start_pos = ui.item.index();
      ui.item.data('start_pos', start_pos);
    },
    change: function(event, ui) {
      setStatus('change');
      var start_pos = ui.item.data('start_pos');
      var index = ui.placeholder.index();
      //displayIndex(index);
    },
    update: function(event, ui) {
      setStatus('update');
      //var input = ui.item.find('span');
      //var index = ui.item.index();
      //input.html(index);
      
      var r = 'result:</br>';
      $("#sortable li").each(function(i, el) {
        var id = $(el).attr('id');
        r += id + '(' + i + ')</br>'
      });
      $('p#result').html(r);
    }
  });
  $("#sortable").disableSelection();
  //alert($( "#sortable" ).sortable( "toArray" ).toSource());
});

function displayIndex(index) {
  $('p#order').html(index);
}

function setStatus(status) {
  $('p#status').html(status);
}