通过jquery-ui中的sortable来实现拖拽排序的简单实例

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来实现拖拽排序的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。