直接上代码：
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); } 注：通过以上排序，可以避免分页出错，避免重复排序号的情况。（代码没有测试，纯手写）