通过jquery-ui中的sortable来实现拖拽排序的简单实例
更新时间:2016年05月24日 16:20:21 投稿:jingxian
下面小编就为大家带来一篇通过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.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来实现拖拽排序的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Raphael一个用于在网页中绘制矢量图形的Javascript库
Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,接下来详细介绍,感兴趣的朋友可以了解下哦2013-01-01在jQuery1.5中使用deferred对象 着放大镜看Promise
在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中(译文见这里),有下面一段描述2011-03-03jQuery实现table表格checkbox全选的方法分析
这篇文章主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下2018-07-07
最新评论