Sortable

Sortable Widget | jQuery UI API Documentation

$(function() {

  function setCursor(obj, val) {
    $(obj).find('span').css('cursor', val);
  }

  var target = $('#sortable');
  setCursor(target, 'pointer');

  target.sortable({
    start: function(e, ui) {
      setCursor(this, 'move');
      var org = ui.item.html();
      $(this).find('.ui-state-highlight').html(org).css({opacity:0.4});
    },
    stop: function() {
      setCursor(this, 'pointer');
    },
    update: function() {
      // console.log('update');
    },
    placeholder: 'ui-state-highlight',
    opacity: 0.6,
    cursor:'move'
  });

  target.disableSelection();

});

html

<ul id="sortable">
  <li class="ui-state-default"><span>1</span></li>
  <li class="ui-state-default"><span>2</span></li>
  <li class="ui-state-default"><span>3</span></li>
  <li class="ui-state-default"><span>4</span></li>
<!-- ... -->
</ul>