<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详解的更多相关文章

  1. atitit.jQuery Validate验证框架详解与ati Validate 设计新特性

    atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...

  2. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  3. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  4. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  5. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  6. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  7. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  8. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  10. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

随机推荐

  1. HeadFirst设计模式之装饰者模式

    一. 1.The Decorator Pattern attaches additional responsibilities to an object dynamically.Decorators ...

  2. POJ3259——Wormholes(Bellman-Ford+SPFA)

    Wormholes DescriptionWhile exploring his many farms, Farmer John has discovered a number of amazing ...

  3. tcp断开的4次挥手

    http://blog.csdn.net/fw0124/article/details/7452695 由于TCP连 接是全双工的,因此每个方向都必须单独进行关闭.这原则是当一方完成它的数据发送任务后 ...

  4. poj 1039 Pipe(叉乘。。。)

    题目:http://poj.org/problem?id=1039 题意:有一宽度为1的折线管道,上面顶点为(xi,yi),所对应的下面顶点为(xi,yi-1),假设管道都是不透明的,不反射的,光线从 ...

  5. 重启php-fpm

    查看pid位置 cat /etc/php-fpm.conf pid = /usr/local/php/var/run/php-fpm.pid #测试php-fpm配置/usr/local/php/sb ...

  6. C# List 用法与示例

    Problem. You have questions about the List collection in the .NET Framework, which is located in the ...

  7. Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别?

    一个帖子的整理: Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别如果你不带参数的实例化:Handler ...

  8. About Wisdom

    All human wisdom is summed up in two words --- wait and hope.人类所有的智慧可以归结为两个词---等待和希望. —— Alexandre D ...

  9. WPF 中资源路径的问题

    WPF 中资源路径的问题 1. 引用当前工程的资源(注意xxxx.png的build action 应设置为Resource 或Embedded Resource) <ImageBrush Im ...

  10. POJ 1655-Balancing Act(树形dp)

    题意: 求n个节点的树中哪个节点删除以后得到的最大连通分量最小. 分析:同上题 #include <map> #include <set> #include <list& ...