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来实现拖拽排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。