jQuery UI sortable()实现拖动排序
Query UI的强大不用多说,今天来看下它的拖动排序功能,jQuery UI使用sortable()实现对元素拖动排序,首先来看下面这个简单的例子:
<!DOCTYPE html>
<html><head><title>jQuery UI sortable()实现拖动排序</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></head><body><script>$(function() {$( ".sortable" ).sortable({cursor: "move",items :"li", //只是li可以拖动opacity: 0.6, //拖动时,透明度为0.6revert: true, //释放时,增加动画update : function(event, ui){ //更新排序之后alert($(this).sortable("toArray"));}});});</script><ul class="sortable"><li class="ui-state-default" id="1">第1项</li><li class="ui-state-default" id="2" >第2项</li><li class="ui-state-default" id="3">第3项</li></ul></body>
</html>jQuery UI sortable参数:
参数 | 默认值 | 作用 |
axis | false | 如果有设置,则元素仅能横向或纵向拖动。可选值:’x', ‘y’ |
cancel |
input,textarea, button,select,option |
阻止排序动作在匹配的元素上发生 |
connectWith | false | 允许sortable对象连接另一个sortable对象,可将item元素拖拽到另一个中.(类型:Selector) |
containment | false | 约束排序动作只能在一个指定的范围内发生。可选值:DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象 |
cursor | auto |
定义在开始排序动作时,鼠标的样式。 如 cursor: “move” |
cursorAt | false |
当开始移动时,元素的偏移的位置(最多两个方向)。可选值:{ top, left, right, bottom }。 如 cursorAt: {left:5,bottom:5} |
delay | 0 |
以毫秒为单位,设置延迟多久才激活排序动作。此参数可防止误点击。 如 delay: 500 |
distance | 1 |
决定至少要在元素上面拖动多少像素后,才正式触发排序动作。 如 distance: 30 |
dropOnEmpty | false | 是否允許拖拽到一個空的sortable对象中。 |
grid | false |
每次移动都按一个格子大小移动,数组值:[x,y] 如 grid: [50, 20] |
handle | false |
限制排序的动作只能在item元素中的某种元素 如 handle: ‘h2′ |
helper | original |
设置是否在拖拽元素时,显示一个辅助的元素。可选值:‘original’, ‘clone’。 如 helper: ‘clone’ |
items | “> *” (第一级子元素) |
指定在排序对象中,哪些元素是可以进行拖拽排序的。 如 items: “> li” |
opacity | false |
辅助元素(helper)显示的透明度 如 opacity: 0.6 |
placeholder | false |
设置当排序动作发生时,空白占位符的CSS样式 如 placeholder: ‘css-class-name’ (指定一个css的class) |
revert | false | 如果设置成true,则被拖拽的元素在返回新位置时,会有一个动画效果 |
scroll | false | 如果设置成true,则元素被拖动到页面边缘时,会自动滚动。 |
scrollSensitivity | 20 | 设置当元素移动至边缘多少像素时,便开始滚动页面 |
scrollSpeed | 20 | 设置页面滚动的速度 |
tolerance | intersect |
设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值:’intersect’, ‘pointer’ intersect:至少重叠50% pointer:鼠标指针重叠元素 |
zIndex | 1000 | 设置在排序动作发生时,元素的z-index值 |
jQuery UI sortable事件:
start
当排序动作开始时触发此事件。
定义:$(‘.selector’).sortable({ start: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });
sort
当元素发生排序时触发此事件。
定义:$(‘.selector’).sortable({ sort: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sort’, function(event, ui) { … });
change
当元素发生排序且坐标已发生改变时触发此事件。
定义:$(‘.selector’).sortable({ change: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });
beforeStop
当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
定义:$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });
stop
当排序动作结束时触发此事件。
定义:$(‘.selector’).sortable({ stop: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });
update
当排序动作结束时且元素坐标已经发生改变时触发此事件。
定义:$(‘.selector’).sortable({ update: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });
receive
当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
定义:$(‘.selector’).sortable({ receive: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });
over
当一个元素拖拽移入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ over: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortover’, function(event, ui) { … });
out
当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。
定义:$(‘.selector’).sortable({ out: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortout’, function(event, ui) { … });
activate
当一个有使用连接的sortable对象开始排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ activate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
当一个有使用连接的sortable对象结束排序动作时,所有允许的sortable触发此事件。
定义:$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
绑定:$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });
jQuery UI sortable方法:
destory
从元素中移除拖拽功能。
用法:.sortable( ‘destroy’ )
disable
禁用元素的拖拽功能。
用法:.sortable( ‘disable’ )
enable
启用元素的拖拽功能。
用法:.sortable( ‘enable’ )
option
获取或设置元素的参数。
用法:.sortable( ‘option’ , optionName , [value] )
serialize
获取或设置序列化后的每个item元素的id属性。
用法:.sortable( ‘serialize’ , [options] )
toArray
获取序列化后的每个item元素的id属性的数组。
用法:.sortable( ‘toArray’ )
refresh
手动重新刷新当前sortable对象的item元素的排序。
用法:.sortable( ‘refresh’ )
refreshPositions
手动重新刷新当前sortable对象的item元素的坐标,此方法可能会降低性能。
用法:.sortable( ‘refreshPositions’ )
cancel
取消当前sortable对象中item元素的排序改变。
用法:.sortable( ‘cancel’ )
转载来源:jQuery UI sortable()实现拖动排序
http://www.php1.cn/Content/jQueryUIsortable--_ShiXianTuoDongPaiXu.html
jQuery UI sortable()实现拖动排序相关推荐
- jquery的sortable拖拽排序插件,顺序没发生改变则不请求
一.前言 前几天刚做完排序,本来以为没什么问题的,结果今天被告知要优化一下..功能上是没问题,但是有一些小细节需要优化.比如我做的是每次拖拽完成之后,都在stop方法里面请求ajax保存顺序.但是要考 ...
- jquery.ui.sortable 笔记
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...
- JQuery UI - sortable
·概述 Selectable插件允许用户对指定的元素进行选中的动作.此外还支持按住Ctrl键单击或拖拽选择多个元素. 官方示例地址:http://jqueryui.com/demos/sortable ...
- Jquery UI sortable
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.p ...
- OL3中结合Jquery UI实现图层拖动并改变图层顺序
概述: 本文讲述OL3中结合Jquery UI实现图层的拖动以及拖动好图层顺序的改变. 效果: 代码: <html xmlns="http://www.w3.org/1999/xhtm ...
- sortable实现拖动排序
html部分 <div class="padding-20 fenxiang_gou margin-bottom-40" style="background: #f ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
- jquery 鼠标拖动排序Li或Table
1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...
- jquery ui table
[代码] jquery ui sortable 实现table,row的拖动 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2 ...
最新文章
- 由粗到精学习LVI-SAM:论文原文解析
- Paddle 环境中 使用LeNet在MNIST数据集实现图像分类
- 在Ubuntu系统中安装Docker
- 使用 Hexo + Next 搭建静态博客
- 目录同步 linux,Linux系统目录实时同步
- 服务器怎么控制忽略样式_使用JavaScript来编写你的CSS样式代码——JSS
- [转]phonegap 2.9 IOS Xcode 搭建环境
- numeric.js
- Qt 遍历目录下所有图片
- html让一行文字在两行,css单行两行文本自适应问题
- 【翻译服务(1)】有道智云使用入门及文本、图片和语音翻译服务
- 优化-规划问题(数学建模)
- windows7微软官方_Microsoft Windows 7 | 第1部分
- Window系统上的Nacos安装与配置
- oracle如何恢复表中删除的数据?
- Unity 工具类 之 Excel 转换为 json、csv、xml、lua格式
- 一起来捉妖 灵石秒开过程 IOS版(越狱与不越狱都可以)
- 微服务天花板,Alibaba Cloud Alibaba 精通笔记,知乎牛客狂转 10w 次,github 狂揽 14k 星
- 不玩手机-自律习惯养成记
- android studio提示HAXM device is not found或者could not start avd
热门文章
- ACE中的设计模式,入门
- android下zip压缩文件加密解密的完美解决方案,Android之zip文件加密解压及进度条的实现...
- 添加资源文件遇到的问题
- python爬虫论坛1688_Python爬虫抓取论坛关键字过程解析
- PHP模拟登陆正方系统获取课表、成绩(一看就懂!!!)
- [Android 4.4.2] Oppo Find7 轻装版 MIUI 4.7.4 by crazyi
- 2016年31款轻量高效的开源JavaScript插件和库
- 没有永恒不变的商机,知识付费项目副业不例外
- Pandas初级认识
- C语言实现线性表之顺序表