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.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.后臺處理
$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來實現拖拽排序的簡單實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答