jquery-ui 之Sortable详解
<div class="aaa">
<ul id="sortable">
<li id="test">Item 6</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 5</li>
</ul>
</div>
$("#sortable").sortable()//直接用
(一)各个参数的介绍
axis: "y" 表示只允许x拖动 或是y拖动
cancel: "#test" 表示禁止某个元素 注意只是填写 .test或者是 #test 或者是标签
connectWith: "#sortable2" 这个暂时还不知道是什么用法
containment: "parent" 移动的窗口是否只是针对父级元素
cursor: "move" 表示移动的时候,鼠标的状态
cursorAt: { left: 20 } 表示光标出现在某个位置的时候可以移动
delay: 150 表示拖动的延迟时间
disabled: true
distance: 30 表示拖动30px的距离的时候, 才可以移动
forceHelperSize: false 这个暂时不知道是什么用法
grid: [ 200, 100 ] 表示拉动一下,元素移动的距离
opacity:0.5 //表示移动的时候的透明度
evert: true 表示移动回退的时候,是否加上渐变回退的效果
scroll :false,
option:"tolerance"
zIndex:100 //移动的时候增加的zIndex值
使用方法:
$("#sortable").sortable({
axis: "y",
cancel: "#test",
...
});
二,方法的介绍
$("#sortable").sortable("cancel"); //取消拖拽方法
$("#sortable").sortable("destroy"); //销毁拖拽方法
$("#sortable").sortable("disable"); //禁止拖拽方法
$("#sortable").sortable("enable"); //开启拖拽方法
三,事件的介绍
$("#sortable").sortable({
activate:function(function,ui){ //移动的时候执行的方法
},
beforeStop:function(){ //移动停止的时候执行的方法,此时排序可以发生变化或者不发生变化
$(this).addClass("abc");
},
change:function(){
$(this).addClass("vvv") //排序发生变化的时候执行的方法
},
create:function(){ //初始化的时候,执行的方法
$(this).addClass("vbv")
},
out:function(){ //当移东到父级元素外的时候,执行的方法
$(this).addClass("vbv")
},
over:function(){
$(this).addClass("vbv") //当在父级的范围内移动的时候,执行的方法
},
remove:function(){ //元素移动的时候执行的方法
},
sort:function(){ //在排序执行的过程中执行的方法
},
start:function(){ //开始移动的时候执行的方法
},
stop:function(){ //移动停止的时候执行的方法
},
update:function(){ //移动的时候并且排序发生变化的时候执行的方法
}
});
jquery-ui 之Sortable详解的更多相关文章
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery的deferred对象详解(转载)
本文转载自: jQuery的deferred对象详解(转载)
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
随机推荐
- HeadFirst设计模式之装饰者模式
一. 1.The Decorator Pattern attaches additional responsibilities to an object dynamically.Decorators ...
- POJ3259——Wormholes(Bellman-Ford+SPFA)
Wormholes DescriptionWhile exploring his many farms, Farmer John has discovered a number of amazing ...
- tcp断开的4次挥手
http://blog.csdn.net/fw0124/article/details/7452695 由于TCP连 接是全双工的,因此每个方向都必须单独进行关闭.这原则是当一方完成它的数据发送任务后 ...
- poj 1039 Pipe(叉乘。。。)
题目:http://poj.org/problem?id=1039 题意:有一宽度为1的折线管道,上面顶点为(xi,yi),所对应的下面顶点为(xi,yi-1),假设管道都是不透明的,不反射的,光线从 ...
- 重启php-fpm
查看pid位置 cat /etc/php-fpm.conf pid = /usr/local/php/var/run/php-fpm.pid #测试php-fpm配置/usr/local/php/sb ...
- C# List 用法与示例
Problem. You have questions about the List collection in the .NET Framework, which is located in the ...
- Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别?
一个帖子的整理: Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别如果你不带参数的实例化:Handler ...
- About Wisdom
All human wisdom is summed up in two words --- wait and hope.人类所有的智慧可以归结为两个词---等待和希望. —— Alexandre D ...
- WPF 中资源路径的问题
WPF 中资源路径的问题 1. 引用当前工程的资源(注意xxxx.png的build action 应设置为Resource 或Embedded Resource) <ImageBrush Im ...
- POJ 1655-Balancing Act(树形dp)
题意: 求n个节点的树中哪个节点删除以后得到的最大连通分量最小. 分析:同上题 #include <map> #include <set> #include <list& ...