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