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 ...
随机推荐
- HashTable、HashMap、LinkedHashMap、TreeMap的比较
HashTable:继承自Dictionary类,实现了Map接口,不允许键或值为空,线程同步: HashMap:继承自AbstractMap类,实现了Map接口,允许键或值为空,线程不同步: Lin ...
- ArcGIS学习记录—属性表的编辑与修改
原文地址: ArcGIS问题:属性表的编辑与修改 - Silent Dawn的日志 - 网易博客 http://gisman.blog.163.com/blog/static/344933882009 ...
- Random Integer Generator
先占坑.以后再修改 昨天遇到一道题, Given int Rand(1) = 0或者 1- uniformly distributed, write a function to implemen ...
- 性能优化工具 MVC Mini Profiler
性能优化工具 MVC Mini Profiler MVC MiniProfiler是Stack Overflow团队设计的一款对ASP.NET MVC.WebForm 以及WCF 的性能分析的小程 ...
- No bean named 'transactionManager' is defined
2016-10-20 23:27:17.771 INFO 7096 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped &quo ...
- ADT中的代码补全设置
设置自动补全代码 刚刚学Android,有很多变量和方法 都不熟悉.需要有提示,才更加方便. 快捷方式:Alt + / 可以出现代码提示. 默认的只有输入“ .” 以后才会有代码补全提示,可作如 ...
- poj3254
还是那句老话:dp关键在状态: 求有多少种排布方式,是任意两头牛不相邻(有些地方不能放): 不用心,一开始还纠结了半天 和之前USACO上某题方法是一样的,每一行放或不放只有两种情况 把它当作一个二进 ...
- apache开源项目--Jackrabbit
Apache Jackrabbit 是由 Apache Foundation 提供的 JSR-170 的开放源码实现.. 随着内容管理应用程序的日益普及,对用于内容仓库的普通.标准化 API 的需求已 ...
- Spring基础知识及bean的配置
IOC与DI: IOC(inversion of control):其思想是反转资源获取的方向.传统的资源查找方式要求组件向容器发起请求查找资源.作为回应,容器适时的返回资源.而应用了IOC之后,则是 ...
- MySQL翻页查询技巧
在查询大量数据库,一般都会采用翻页.自然会想到offset跟limit. 今天知道了一个技巧,用id查询.因为id是主键,查起来很快. 思路是:给id一个区间做where条件,将数据分隔成几份,然后每 ...