列表拖拽排序

直接上代码： 

1.ul里面的数据，可以用后台数据循环输出。

HTML代码：

<ul id="sortable">

  <li class="ui-state-default" data-id="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 1</li>
  <li class="ui-state-default" data-id="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 2</li>
  <li class="ui-state-default" data-id="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 3</li>
  <li class="ui-state-default" data-id="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 4</li>
  <li class="ui-state-default" data-id="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 5</li>
  <li class="ui-state-default" data-id="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>test 6</li>

</ul>

<!--依赖脚本（也可以是本地的）：-->
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

JS代码：

<script>
$(function() { //这里面的两个函数必不可少。可以借用第一个进行一些数据处理。
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
});

</script>

//

<!--下面举个例，结合数据库对其排序。1.后台传到前台的数据为data,用volist循环后的结果是data-id： 2.得在数据表里有一个列是用于排序的。如sort：  -->
<script>
var sort_define = '';
var sort_end='';
$('#sortable').sortable({ start:  //用里面的start 事件取数据的id原顺序.
  function(event, ui) {
    var sort='';
    $(this).find('li').each(function(){
       var id = $(this).attr('data-id');
       if(sort==""){
           sort = id;
       }else{
           if(typeof(id)!='undefined')
             sort = sort+'_'+id
       }
   });
   sort_define = sort;
 } });


 $('#sortable').sortable({ stop: //用里面的stop事件取数据的id变化后顺序.
   function(event, ui) {
     var sort='';
     $(this).find('li').each(function(){
        var id = $(this).attr('data-id');
        if(sort==""){
            sort = id;
        }else{
            if(typeof(id)!='undefined')
              sort = sort+'_'+id
        }
    });
    sort_end = sort;
  }
    //这里就可做AJAX，把sort_define与sort_end提交到后台。
    });
</script>
/
后台代码如下:
$define_id = explode('_', I('sort_define'));
        $end_id = explode('_', I('sort_end'));
        foreach ($define_id as $key=>$value) {
            $data= M('goods')->find($value);
            $sort[]=$data['list'];
        }
        foreach ($end_id as $key=>$value) {
            $map_end['id']= $value;
            $data_end['list'] = $sort[$key];
            M('goods')->where($map_end)->save($data_end);
        }
注：通过以上排序，可以避免分页出错，避免重复排序号的情况。（代码没有测试，纯手写）