jquery-ui 之Sortable詳解

標籤：des   c   style   class   tar   a   

<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(){ //移動的時候並且排序發生變化的時候執行的方法

}

});