• UID30
  • 登录2016-10-11
  • 粉丝27
  • 关注104
  • 发帖50
  • 主页
  • 金币1032枚
原创写手
社区居民
忠实会员
追星一族
Kimi.Huang 发布于2015-08-17 23:17
0/3514

[前/后端开发]拖拽排序(jQuery UI Sortable)

楼层直达
1、 Sortable 简介
jquery ui 的另一个强大的功能就是拖动排序,也就是通过鼠标的拖到,实现对一些元素的排序。
2、Sortable 使用
2.1、引入
2.1.1、JS
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.js"></script>
2.1.2、CSS
<link href="http://cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet">
2.3、HTML
<ul id="sortable">
    <li class="ui-state-default" data-index="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://finalshares.com/" target="_blank">极分享 —— 极分享 —— 解决方案提供社区</a></li>
    <li class="ui-state-default" data-index="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://tt4it.com/" target="_blank">TT4IT —— 优质互联网资源整合分享平台</a></li>
    <li class="ui-state-default" data-index="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="http://api.jqueryui.com/sortable/" target="_blank">jQuery UI Sortable —— Reorder elements in a list or grid using the mouse.</a></li>
</ul>
2.3、Javascript
$(function() {
    $("#sortable").sortable();
});
3、Sortable 截图
3.1、拖拽排序之前

描述:拖拽排序之前

图片:EEA7DD14-89FF-4FDA-B998-E9634CDF7BA2.png

拖拽排序之前

3.2、拖拽排序之时

描述:拖拽排序之时

图片:0A530F71-0E78-43E3-AB23-8156D9A45618.png

拖拽排序之时

3.3、拖拽排序之后

描述:拖拽排序之后

图片:B5A9D7E4-0EC3-41E4-AC7F-32996D3EA00C.png

拖拽排序之后

4、Sortable 参数
4.1、axis
默认值:false
作用域名:如果有设置,则元素仅能横向或纵向拖动。可选值:’x’, ‘y’
4.2、cancel
默认值:input,textarea,button,select,option
作用域名:阻止排序动作在匹配的元素上发生
4.3、connectWith
默认值:false
作用域名:允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中.(类型:Selector)
4.4、containment
默认值:false
作用域名:约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象
4.5、cursor
默认值:auto
作用域名:定义在开始排序动作时,鼠标的样式。如 cursor: “move”
4.6、cursorAt
默认值:false
作用域名:当开始移动时,元素的偏移的位置(最多两个方向)。可选值:{ top, left, right, bottom }。如 cursorAt: {left:5,bottom:5}
4.7、delay
默认值:0
作用域名:以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。如 delay: 500
4.8、distance
默认值:1
作用域名:决定至少要在元素上面拖动多少像素后,才正式触发排序动作。如 distance: 30
4.9、dropOnEmpty
默认值:false
作用域名:是否允許拖拽到一個空的sortable对象中。
4.10、grid
默认值:false
作用域名:每次移动都按一个格子大小移动,数组值:[x,y],如 grid: [50, 20]
4.11、handle
默认值:false
作用域名:限制排序的动作只能在item元素中的某种元素, 如 handle: ‘h2′
4.12、helper
默认值:false
作用域名:设置是否在拖拽元素时,显示一个辅助的元素。可选值:‘original’, ‘clone’。如 helper: ‘clone’
4.13、items
默认值:“> *” (第一级子元素)
作用域名:指定在排序对象中,哪些元素是可以进行拖拽排序的。如 items: “> li”
4.14、opacity
默认值:false
作用域名:辅助元素(helper)显示的透明度, 如 opacity: 0.6
4.15、placeholder
默认值:false
作用域名:设置当排序动作发生时,空白占位符的CSS样式,如 placeholder: ‘css-class-name’ (指定一个css的class)
4.16、revert
默认值:false
作用域名:如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果
4.17、scroll
默认值:false
作用域名:如果设置成true,则元素被拖动到页面边缘时,会自动滚动。
4.18、scrollSensitivity
默认值:20
作用域名:设置当元素移动至边缘多少像素时,便开始滚动页面
4.19、scrollSpeed
默认值:20
作用域名:设置页面滚动的速度
4.20、tolerance
默认值:intersect
作用域名:设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’, ‘pointer’,intersect:至少重叠50%,pointer:鼠标指针重叠元素
4.21、zIndex
默认值:1000
作用域名:设置在排序动作发生时,元素的z-index值
5、 Sortable 事件
5.1、start
当排序动作开始时触发此事件。
定义:$(‘.selector’).sortable({ start: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });

5.2、sort
当元素发生排序时触发此事件。
定义:$(‘.selector’).sortable({ sort: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sort’, function(event, ui) { … });

5.3、change
当元素发生排序且坐标已发生改变时触发此事件。
定义:$(‘.selector’).sortable({ change: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });

5.4、beforeStop
当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
定义:$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });

5.5、stop
当排序动作结束时触发此事件。
定义:$(‘.selector’).sortable({ stop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });

5.6、update
当排序动作结束时且元素坐标已经发生改变时触发此事件。
定义:$(‘.selector’).sortable({ update: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });

5.7、reciver
当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
定义:$(‘.selector’).sortable({ receive: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });

5.8、over
当一个元素拖拽移入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ over: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortover’, function(event, ui) { … });

5.9、out
当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ out: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortout’, function(event, ui) { … });

5.10、activate
当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ activate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });

5.11、deactivate
当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });

6、 Sortable 方法
6.1、destroy
从元素中移除拖拽功能。
用法:.sortable( ‘destroy’ )

6.2、disable
禁用元素的拖拽功能。
用法:.sortable( ‘disable’ )

6.3、enable
启用元素的拖拽功能。
用法:.sortable( ‘enable’ )

6.4、option
获取或设置元素的参数。
用法:.sortable( ‘option’ , optionName , [value] )

6.5、serialize
获取或设置序列化后的每个item元素的id属性。
用法:.sortable( ‘serialize’ , [options] )

6.6、toArray
获取序列化后的每个item元素的id属性的数组。
用法:.sortable( ‘toArray’ )

6.7、refresh
手动重新刷新当前sortable对象的item元素的排序。
用法:.sortable( ‘refresh’ )

6.8、refreshPositions
手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。
用法:.sortable( ‘refreshPositions’ )

6.9、cancel
取消当前sortable对象中item元素的排序改变。
用法:.sortable( ‘cancel’ )

7、 源码示例
dragsort.zip
7.1、纯前端示例
7.1.1、路径: dragsort/纯前端示例/dragsort.html
7.1.2、直接点击 dragsort.html 运行查看
7.2、前后端示例(Django)
7.2.1、路径: dragsort/前后端示例(Django)/dragsort
7.2.2、前端与后端交互
7.2.2.1、为可拖拽元素添加 data-index 属性
<ul id="sortable">
    {% for item in items %}
        <li class="ui-state-default" data-index="fs_ item.pk "><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><a href="fs_ item.siteurl " target="_blank">fs_ item.sitename  —— fs_ item.description </a></li>
    {% endfor %}
</ul>
7.2.2.2、前端 AJAX 调用
拖拽排序后,获取 data-index 所有值,并 Ajax 调用后端接口
$("#sortable").sortable({
    update: function( event, ui ) {
        var positions = []
        $("#sortable>li").each(function(e) {positions.push($(this).attr("data-index"))})
        $.ajax({
            url: "reposition",
            type: "POST",
            dataType: "json",
            data: {positions: positions},
            success: function(data) {}
        })
    }
});
7.2.2.3、后端获取 positions 并处理
positions = request.POST.getlist('positions[]')
          
for index, pk in enumerate(positions):
    jui = JQueryUIDemo.objects.get(pk=pk)
    jui.position = index + 1
    jui.save()
7.2.3、运行 Django 项目
7.2.3.1、安装软件
pip install -r requirements.txt
7.2.3.2、运行项目
python manage.py runserver 0.0.0.0:9000
7.2.3.3、访问拖拽示例页面
http://127.0.0.1:9000/
8、 参考链接
[1] jQuery UI Sortable 官方文档

Note:本源代码由“极分享”社区创建,添加或者修改,我们会持续优化源代码以提供更好的解决方案,更多详情和支持请前往finalshares.com

0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 68872/364   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 38951/190   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 36030/0   Python爬虫:常用浏览器的useragent

  • 35849/255   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 35249/145   省时省力的Android组件群来了,非常棒的原型参考

  • 27847/2   超全!整理常用的iOS第三方资源

  • 26914/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 26493/142   2016抢红包软件及源码

  • 21505/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 21163/25   Android工程师面试题大全

  • 20917/27   2016程序员跳槽全攻略

  • 20717/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 20546/155   Android版类似UC浏览器:非常赞,产品级的源码

  • 19791/20   码魂:程序员的牛B漫画

  • 18069/10   2016年最全的Android面试考题+答案 精编版

  • 17827/3   吐槽那些程序员的搞笑牛逼注释

  • 17082/42   一个绚丽的loading动效分析与实现!

  • 16887/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 16842/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 16801/1   iOS 动画总结

  • 16046/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 15827/23   个人收集的Android 各类功能源代码

  • 15609/10   女程序员的梦,众网友的神回复

  • 15372/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 15310/11   年会上现场review代码是怎么样的体验!

  • 15224/81   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 14826/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 14783/23   珍藏多年的素材,灵感搜寻网站

  • 14772/101   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 14697/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 14625/20   Android福利第三波【Android电子书】

  • 14185/76   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 13907/0   iOS中文版资源库,非常全

  • 13840/15   基于Android支付宝支付设计和开发方案

  • 13805/18   65条最常用正则表达式,你要的都在这里了

  • 13309/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12960/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 12638/7   一张图搞定iOS学习路线,非常全面

  • 12577/7   用程序员的姿势抢过年的火车票

  • 12412/46   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 12280/10   成为Java顶尖程序员 ,看这11本书就够了

  • 12097/10   微信支付终于成功了(安卓,iOS),在此分享

  • 12012/18   一张图搞定Android学习路线,非常全面

  • 11851/0   GitHub iOS 库和框架Top100 

  • 11771/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 11559/29   【持续更新中】Android福利贴(一):资料源码

  • 11557/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 10976/4   46 个非常有用的 PHP 代码片段

  • 10858/3   即时通信第三方库

  • 10549/8   流媒体视频直播方案

  • 10407/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10383/18   八个最优秀的Android Studio插件

  • 10270/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10079/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 10068/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 9492/6   开箱即用!Android四款系统架构工具

  • 9321/10   十大技巧快速提升Android应用开发性能

  • 9262/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 9223/3   一张图看清Linux 内核运行原理

  • 9003/1   Android性能优化视频,文档以及工具

  • 返回顶部