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

1.引入文件

<script src="{sh::PUB}js/jquery-1.10.1.min.js"></script><link rel="stylesheet" href="Public/css/jquery-ui.min.css"><script src="{sh::PUB}js/jquery-ui.min.js"></script>

2.给元素附上sortable类

<tbody class="sortable"><tr></tr><tr></tr> </tbody>

3.开启并配置

$（function（） {$（".sortable"）.sortable（{cursor: "move",items: "tr", //只是tr可以拖动opacity: 0.6, //拖动时，透明度为0.6revert: 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.后台处理

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