drag and sort. require jquery.event.drag-2.0.js

sortList.js

  var offsets = [];
  var curPos = 0;
  $('#list li').each(function(i){
      // init : original order
      $(this).attr('data-order',i);
      
      $(this).bind('dragstart',function(event){
          return $( this ).css({'opacity':.5,'color':'white','border':'1px dashed #ccc'})
              .clone().addClass('active')
              .insertAfter( this );
      })
          .bind('drag',function(event){
              $( event.dragProxy ).css({
                  top: event.offsetY,
                  left: event.offsetX
              });
              var root = $('#list'),
              r = root[0],
              lis = root.find('li').not('.active');
              
              var preEle = lis.eq(curPos-1)[0],
              curEle = lis.eq(curPos)[0],
              nextEle = lis.eq(curPos+1)[0];
              
              offsets.length = 0;
              curPos = lis.index( $(this)[0] );
              lis.each(function(e){
                  offsets.push($(this).offset().top);
              });
              
              if ( event.offsetY > offsets[curPos+1] ){
                  r.insertBefore(nextEle,curEle);
              }
              if ( event.offsetY < offsets[curPos-1] ){
                  r.insertBefore(curEle,preEle);
              }
          })
          .bind('dragend',function(event){
              $( event.dragProxy ).remove();
              $(this).css({
                  'opacity':1,
                  'color':'black',
                  'border':'0'
              });
          });
  });
  function getOrder(){
      var order = [];
      var $root = $('#list');
      $('#list li').each(function(){
          order.push( $(this).attr('data-order') );
      });
      alert(order);
  }