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