1.引入文件
rush:xhtml;">
2.给元素附上sortable类
rush:xhtml;">
3.开启并配置
rush:js;">
$(function() {
$(".sortable").sortable({
cursor: "move",items: "tr",//只是tr可以拖动
opacity: 0.6,//拖动时，透明度为0.6
revert: true,//释放时，增加动画
update: function(event,ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
$.ajax({
url: '{sh::U("AgentGoods/ajax","todo=categoryDragsort")}',type: 'POST',data: 'categoryids=' + categoryids,success: function(json) {
if (json == 1) {
layer.msg('移动成功',{
icon: 1
});
} else {
$this.sortable("cancel");
layer.msg('移动失败',{
icon: 2
});
}
}
});
}
});
$(".sortable").disableSelection();
});
4.后台处理
_post('categoryids');
$categoryidsArr = explode(",",$categoryids);
foreach ($categoryidsArr as $k => $v) {
$data['sort'] = count($categoryidsArr) - $k;
$data['id'] = $v;
M('Agentgoods_category')->where(array('id'=>$v))->save($data);
}
exit('1');
小结：
这种排序，不是交换，而是彻底的整体调整
以上这篇通过jquery-ui中的sortable来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
