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详解,古老的榕树,5-wow.com