JQuery UI - selectable

1. ·概述   
2. Selectable插件允許用戶對指定的元素進行選中的動作。此外還支持按住Ctrl鍵單擊或拖拽選擇多個元素。   
3. 官方示例地址：http://jqueryui.com/demos/selectable/   
4.   
5.   
6. ·參數（參數名 : 參數類型 : 默認值）   
7. autoRefresh : Boolean : true  
8.   決定是否在每次選擇動作時，都重新計算每個選中元素的坐標和大小。如果你有很多個選擇項的話，建議設置成false並通過方法手動刷新。   
9.   初始：$('.selector').selectable({ autoRefresh: false });   
10.   獲取：var autoRefresh = $('.selector').selectable('option', 'autoRefresh');   
11.   設置：$('.selector').selectable('option', 'autoRefresh', false);   
12.   
13. autoRefresh : Boolean : true  
14.   決定是否在每次選擇動作時，都重新計算每個選中元素的坐標和大小。如果你有很多個選擇項的話，建議設置成false並通過方法手動刷新。   
15.   初始：$('.selector').selectable({ autoRefresh: false });   
16.   獲取：var autoRefresh = $('.selector').selectable('option', 'autoRefresh');   
17.   設置：$('.selector').selectable('option', 'autoRefresh', false);   
18.   
19. cancel : Selector : ':input,option'    
20.   防止在與選擇器相匹配的元素上發生選擇動作。   
21.   初始：$('.selector').selectable({ cancel: ':input,option' });   
22.   獲取：var cancel = $('.selector').selectable('option', 'cancel');   
23.   設置：$('.selector').selectable('option', 'cancel', ':input,option');   
24.   
25. delay : Integer : 0   
26.   以毫秒為單位，設置延遲多久才激活選擇動作。此參數可防止誤點擊。   
27.   初始：$('.selector').selectable({ delay: 20 });   
28.   獲取：var delay = $('.selector').selectable('option', 'delay');   
29.   設置：$('.selector').selectable('option', 'delay', 20);   
30.   
31. distance : Integer : 0   
32.   決定至少要在元素上面拖動多少像素后，才正式觸發選中的動作。   
33.   初始：$('.selector').selectable({ distance: 20 });   
34.   獲取：var distance = $('.selector').selectable('option', 'distance');   
35.   設置：$('.selector').selectable('option', 'distance', 20);   
36.   
37. filter : Selector : '*'  
38.   設置哪些子元素才可以被選中。   
39.   初始：$('.selector').selectable({ filter: 'li' });   
40.   獲取：var filter = $('.selector').selectable('option', 'filter');   
41.   設置：$('.selector').selectable('option', 'filter', 'li');   
42.   
43. tolerance : String : 'touch'    
44.   可選值：'touch', 'fit'，分別代表完全和部署覆蓋元素即觸發選中動作。   
45.   初始：$('.selector').selectable({ tolerance: 'fit' });   
46.   獲取：var tolerance = $('.selector').selectable('option', 'tolerance');   
47.   設置：$('.selector').selectable('option', 'tolerance', 'fit');   
48.   
49.   
50. ·事件   
51. selected   
52.   當選中某一個元素后觸發此事件。   
53.   初始：$('.selector').selectable({ selected: function(event, ui) { ... } });   
54.   綁定：$('.selector').bind('selected', function(event, ui) { ... });   
55.   
56. selecting   
57.   當選中某一個元素時觸發此事件。   
58.   初始：$('.selector').selectable({ selecting: function(event, ui) { ... } });   
59.   綁定：$('.selector').bind('selecting', function(event, ui) { ... });   
60.   
61. start   
62.   當開始准備要選中一個元素時觸發此事件。   
63.   初始：$('.selector').selectable({ start: function(event, ui) { ... } });   
64.   綁定：$('.selector').bind('selectablestart', function(event, ui) { ... });   
65.   
66. stop   
67.   當已經結束選中一個元素時觸發此事件。   
68.   初始：$('.selector').selectable({ stop: function(event, ui) { ... } });   
69.   綁定：$('.selector').bind('selectablestop', function(event, ui) { ... });   
70.   
71. unselected   
72.   當取消選中某一個元素后觸發此事件。   
73.   初始：$('.selector').selectable({ unselected: function(event, ui) { ... } });   
74.   綁定：$('.selector').bind('unselected', function(event, ui) { ... });   
75.   
76. unselecting   
77.   當取消選中某一個元素后觸發此事件。   
78.   初始：$('.selector').selectable({ unselecting: function(event, ui) { ... } });   
79.   綁定：$('.selector').bind('unselecting', function(event, ui) { ... });   
80.   
81.   
82. ·方法   
83. destory   
84.   從元素中移除拖拽功能。   
85.   用法：.droppable( 'destroy' )   
86.   
87. disable   
88.   禁用元素的拖拽功能。   
89.   用法：.droppable( 'disable' )   
90.   
91. enable   
92.   啟用元素的拖拽功能。   
93.   用法：.droppable( 'enable' )   
94.   
95. option   
96.   獲取或設置元素的參數。   
97.   用法：.droppable( 'option' , optionName , [value] )   
98.   
99. refresh   
100.   用於手動刷新、重新計算每個選中元素的位置和大小。當autoRefresh設置成false，此方法對於刷新大量選中項非常有用。   
101.   用法：.selectable( 'refresh' ) 

 

jQuery UI draggable+droppable+resizable+selectable+sortable   實例

<script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script>
<script language="JavaScript" type="text/javascript" src="ui/jquery-ui-1.9.1.custom.js"></script>
<!--<script language="JavaScript" type="text/javascript" src="ui/jquery.ui.datepicker-zh-CN.js"></script>-->
<link rel="stylesheet" type="text/css" href="ui/jquery-ui-1.9.1.custom.css">


<!--==============================draggable===========================-->
<!--==================================================================-->
<input type="button" value="draggable_fun" onclick="draggable_fun();" />
<div id="draggable_div" class="ui-widget-content"><!--將想要可拖拽的部分用div括起來，也可以用其他網頁標簽括起來，被括起來的地方可添加任意內容-->
<p>Drag me around</p>
<br/>
i can fly!
</div>
<script language="JavaScript" type="text/javascript">
$("#draggable_div").draggable({
//=================屬性
addClasses : true, //如果設置成false，將在加載時阻止ui-draggable樣式的加載。當有很多對象要加載draggable()插件的情況下，這將對性能有極大的優化。默認值 true
appendTo : "parent", //用來指定控件在拖拽過程中ui.helper的容器, 默認情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.默認值 "parent"
axis : false, //約束拖拽的動作只能在X軸或Y軸上執行，可選值："數值", "數值"。默認值 false
cancel : "input", //防止在指定的對象上開始拖拽可用JQuery選擇器寫法來指定。默認值 "input,textarea,button,select,option"
connectToSortable : false, //允許draggable被拖拽到指定的sortables中可用JQuery選擇器寫法來指定，如果使用此選項helper屬性必須設置成clone才能正常工作。默認值 false
containment : false, //強制draggable只允許在指定元素或區域的范圍內移動，可選值："parent", "document", "window", [ 數值, 數值, 數值, 數值 ].默認值 false
cursor : "auto", //指定在做拖拽動作時，鼠標的CSS樣式。默認值 "auto"
cursorAt : { //當開始移動時，鼠標定位在的某個位置上（最多兩個方向）。可選值：{ top, left, right, bottom }.默認值 false
left : 5
},
delay : 0, //當鼠標點下后，延遲指定時間后才開始激活拖拽動作（單位：毫秒）。此選項可以用來防止不想要的拖累元素時的誤點擊。默認值 0
disabled : false, //如果設成true則draggable實例不能使用。默認值 false
distance : 1, //當鼠標點下后，只有移動指定像素后才開始激活拖拽動作。默認值 1
grid : false, //拖拽元素時，只能以指定大小的方格進行拖拽。可選值： [數值,數值] 默認值 false
handle : false, //限制只能在拖拽元素內的指定元素開始拖拽，可用JQuery選擇器寫法來指定。默認值 false
helper : "original", //拖拽元素時的顯示方式。（如果是函數，必須返回值是一個DOM元素）可選值："original", "clone", Function默認值 "original"
iframeFix : true, //可防止當mouseover事件觸發拖拽動作時，移動過iframes並捕獲到它（內部內容），如果設置成true，則屏蔽層會覆蓋頁面的iframe。如果設置成對應的選擇器，則屏蔽層會覆蓋相匹配的iframe。默認值 false
opacity : 0.35, //當元素開始拖拽時，改變元素的透明度。默認值 false
refreshPositions : false, //如果設置成true，所有移動過程中的坐標都會被記錄。（注意：此功能將影響性能）默認值 false
revert : false, //當元素拖拽結束后，元素回到原來的位置。默認值 false
revertDuration : 500, //當元素拖拽結束后，元素回到原來的位置的時間。（單位：毫秒）默認值 500
scope : "default", //設置元素只允許拖拽到具有相同scope值的元素。默認值 "default"
scroll : true, //如果設置為true，元素拖拽至邊緣時，父容器將自動滾動。默認值 true
scrollSensitivity : 20, //當元素拖拽至邊緣時，父窗口一次滾動的像素。默認值 20
scrollSpeed : 20, //當元素拖拽至邊緣時，父窗口滾動的速度。默認值 20
snap : "div", //當設置為true或元素標簽時，元素拖拽到其它元素的邊緣時，會自動吸附其它元素。默認值 false
snapMode : "both", //確定拖拽的元素吸附的模式。可選值："inner", "outer", "both"默認值 "both"
snapTolerance : 20, //確定拖拽的元素移動至其它元素多少像素的距離時，發生吸附的動作。默認值 20
stack : "div", //控制匹配元素的z-index值，使當前拖拽的對象始終在匹配元素之前，而且似乎要控制匹配的元素只能以其HTML標簽名來匹配.默認值 false
zIndex : 100, //控制當拖拽元素時，改變元素的z-index值。默認值 false

//=================事件
create : function(event, ui){ //當創建draggable時觸發
//alert("this is create");
},
start : function(event, ui){ //當鼠標開始拖拽時，觸發此事件。
//alert("this is start");
},
drag : function(event, ui){ //當鼠標拖拽移動時，觸發此事件。
//alert("this is drag");
},
stop : function(event, ui){ //當移動結束鼠標松開時，觸發此事件。
//alert("this is stop");
}
});

function draggable_fun(){
//=================方法
//$( "#draggable_div" ).draggable("destroy"); //從元素中移除拖拽功能。
$( "#draggable_div" ).draggable("disable"); //禁用元素的拖拽功能。
$( "#draggable_div" ).draggable("enable"); //啟用元素的拖拽功能。
$( "#draggable_div" ).draggable("option","disabled",false);//為指定屬性賦值，第二參數為draggable的一個屬性名，第三參數為可以為該屬性賦的值
$( "#draggable_div" ).draggable("option","disabled"); //獲取指定屬性的值，第二參數為draggable的一個屬性名
$( "#draggable_div" ).draggable("widget"); //返回該可拖拽元素的JQuery對象
}
</script>




<!--==============================droppable===========================-->
<!--==================================================================-->
<input type="button" value="droppable_fun" onclick="droppable_fun();" />
<div id="droppable_div" class="ui-widget-content"><!--將想要可拖放的部分用div括起來，也可以用其他網頁標簽括起來，被括起來的地方可添加任意內容-->
<p>Drop here</p>
</div>
<script language="JavaScript" type="text/javascript">
$("#droppable_div").droppable({
//=================屬性
accept : "*", //僅允許符合JQuery選擇器的元素激活拖放的事件。（如果是函數，則此函數會在頁面上所有元素被調用，函數的返回值必須是布爾值。）默認值 "*"
activeClass : "ui-state-highlight", //如果設置值，則當有拖拽事件發生時，為頁面上所有允許（accept）的元素添加此樣式。默認值 false
addClasses : true, //設置為false，可以阻止ui-droppable樣式添加至可拖放的對象。（這樣可以獲取一定的性能優化） 默認值 true
disabled : false, //如果設成true則droppable實例不能使用。默認值 false
greedy : false, //是否防止嵌套的droppable事件被傳播。默認值 false
hoverClass : "drop-hover", //當拖拽元素移至帶有可拖放插件的元素上時，為元素添加指定的樣式。默認值 false
scope : "default", //設置元素只允許具有相同scope值拖拽元素激活此拖放元素。默認值 "default"
tolerance : "touch", /*判斷一個可拖拽元素被“放到”一個可拖放元素的判斷模式。（可選值："fit", "intersect", "pointer", "touch"）默認值 "intersect"
fit：拖拽元素完全覆蓋拖放元素
intersect：拖拽元素至少50%覆蓋拖放元素
pointer：鼠標指針重疊在可拖放元素上
touch：只要有任何重疊即發生
*/
//=================事件
create : function(event, ui) { //當創建droppable時觸發
//alert("this is create");
},
activate : function(event, ui) { //當任何可拖拽元素開始拖拽動作時激活此事件。
//alert("this is activate");
},
deactivate : function(event, ui) { //當任何可拖拽元素停止拖拽動作時激活此事件。
//alert("this is deactivate");
},
over : function(event, ui) { //當一個被允許（accept）的可拖拽元素移動並覆蓋可拖放元素時激活。
//alert("this is over");
},
out: function(event, ui) { //當一個被允許（accept）的可拖拽元素移出可拖放元素時激活。
//alert("this is out");
},
drop: function(event, ui) { //當一個被允許（accept）的可拖拽元素移動並覆蓋可拖放元素，松開鼠標時激活。
//alert("this is drop");
}
});

function droppable_fun(){
//=================方法
//$( "#droppable_div" ).droppable("destroy"); //從元素中移除拖放功能。
$( "#droppable_div" ).droppable("disable"); //禁用元素的拖放功能。
$( "#droppable_div" ).droppable("enable"); //啟用元素的拖放功能。
$( "#droppable_div" ).droppable("option","disabled",false); //為指定屬性賦值，第二參數為droppable的一個屬性名，第三參數為可以為該屬性賦的值
$( "#droppable_div" ).droppable("option","disabled"); //獲取指定屬性的值，第二參數為droppable的一個屬性名
$( "#droppable_div" ).droppable("widget"); //返回該可拖放元素的JQuery對象
}
</script>




<!--==============================resizable===========================-->
<!--==================================================================-->
<input type="button" value="resizable_fun" onclick="resizable_fun();" />
<div id="resizable_div" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
<script language="JavaScript" type="text/javascript">
$("#resizable_div").resizable({
//=================屬性
alsoResize : false, //當調整元素大小時，同步改變符合JQuery選擇器的另一個（或一組）元素的大小。默認值 false
animate : true, //在調整元素大小結束之后是否顯示動畫默認值 false
animateDuration : "slow", //動畫效果的持續時間。（單位：毫秒）可選值："slow" , "normal" , "fast" 默認值 "slow"
animateEasing : "easeOutBounce", //選擇何種動畫效果。默認值 "swing"
aspectRatio : false, //如果設置為true，則元素的可調整尺寸受原來高寬比的限制。例如：9 / 16, or 0.5 默認值 false
autoHide : false, //如果設置為true，則默認隱藏掉可調整大小的手柄，除非鼠標移至元素上。默認值 false
cancel : "input,textarea,button,select,option", //阻止resizable插件加載在與你匹配的元素上。默認值 "input,textarea,button,select,option"
containment : false, //控制元素只能在某一個元素的大小之內改變。允許值："parent" , "document" , DOM元素 , 或一個選擇器。默認值 false
delay : 0, //以毫秒為單位，當發生鼠標點擊手柄改變大小，延遲多少毫秒后才激活事件。默認值 0
disabled : false, //如果設成true則resizable實例不能使用。默認值 false
distance : 1, //以像素為單位，當發生鼠標點擊手柄改變大小，延遲多少像素后才激活事件。默認值 1
ghost : true, //如果設置為true，則在調整元素大小時，有一個半透明的輔助對象顯示。默認值 false
grid : false, //設置元素調整的大小隨網格變化，允許的數據為數組：[數值,數值]。默認值 false
handles : "e, s, se", //設置resizable插件允許生成在元素的哪個邊上，可選值：n, e, s, w, ne, se, sw, nw, all。默認值 "e, s, se"
helper : "resizable-helper", //一個CSS類，當調整元素大小時，將被添加到輔助元素中，一但調整結束則恢復正常。默認值 false
maxHeight : 1500, //設置允許元素調整的最大高度。默認值 null
maxWidth : 1500, //設置允許元素調整的最大寬度。默認值 null
minHeight : 10, //設置允許元素調整的最小高度。默認值 10
minWidth : 10, //設置允許元素調整的最小寬度。默認值 10

//=================事件
create : function(event, ui) { //當創建resizable時觸發
//alert("this is create");
},
start : function(event, ui) { //當元素調整動作開始時觸發。
//alert("this is start");
},
resize : function(event, ui) { //當元素調整動作過程中觸發。
//alert("this is resize");
},
stop : function(event, ui) { //當元素調整動作結束時觸發。
//alert("this is stop");
}
});

function resizable_fun(){
//=================方法
//$("#resizable_div").resizable("destroy"); //從元素中移除縮放功能。
$("#resizable_div").resizable("disable"); //禁用元素的縮放功能。
$("#resizable_div").resizable("enable"); //開啟元素的縮放功能。
$("#resizable_div").resizable("option","disabled",false); //為指定屬性賦值，第二參數為resizable的一個屬性名，第三參數為可以為該屬性賦的值
$("#resizable_div").resizable("option","disabled"); //獲取指定屬性的值，第二參數為resizable的一個屬性名
$("#resizable_div").resizable("widget"); //返回該可縮放元素的JQuery對象
}
</script>











<!--==============================selectable==========================-->
<!--==================================================================-->
<!--
創建多選實例前必須至少先指定兩個css類的背景色 .ui-selecting .ui-selected 分別是在可選元素被選擇時，和選定后添加的css類
並且為了靈活定義多個可多選部分不同的樣式，在定義該css類時最好加上所屬作用范圍這里是#selectable_div
-->
<style>
#selectable_div .ui-selecting { background: #FECA40; }/*選擇某個項目時添加該css類*/
#selectable_div .ui-selected { background: #F39814; }/*選定了某個項目時添加該css類*/

/*這個樣式類則顯得不那么重要了，可以不設定，可被多選的元素將添加該css類*/
.ui-selectee { background: white; }
</style>
<input type="button" value="selectable_fun" onclick="selectable_fun();" />
<!--通過按 Ctrl 可以點擊選擇多項-->
<div id="selectable_div">
<div class="ui-widget-content">Item 1</div>
<div class="ui-widget-content">Item 2</div>
<div class="ui-widget-content">Item 3</div>
<div class="ui-widget-content">Item 4</div>
<div class="ui-widget-content">Item 5</div>
<div class="ui-widget-content">Item 6</div>
<div class="ui-widget-content">Item 7</div>
<div class="ui-widget-content">Item 8</div>
<div class="ui-widget-content">Item 9</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#selectable_div").selectable({
//=================屬性
appendTo : "body", //指定選擇過程中將輔助元素追加到何處。默認值 "body"
autoRefresh : true, //決定是否在每次選擇動作時，都重新計算每個選擇元素的坐標和大小。如果你有很多個選擇項的話，建議設置成false並通過方法手動刷新。默認值 true
cancel : "textarea,button,select,option", //防止在與選擇器相匹配的元素上發生選擇動作。默認值 "input,textarea,button,select,option"
delay : 0, //以毫秒為單位，設置延遲多久才激活選擇動作。此參數可防止誤點擊。默認值 0
disabled : false, //如果選擇true則該selectable實例將不能使用。默認值 false
distance : 0, //決定至少要在元素上面拖動多少像素后，才正式觸發選擇的動作。默認值 0
filter : "*", //設置哪些子元素才可以被選擇。默認值 "*"
tolerance : "touch", //可選值："touch", "fit"，分別代表完全和部署覆蓋元素即觸發選擇動作。默認值 "touch"
//=================事件
create :function(event, ui) {
//alert("this is create"); //當創建selectable時觸發
},
selected :function(event, ui) { //當選定某一個元素后觸發此事件。
//alert("this is selected");
},
selecting :function(event, ui) { //當選擇某一個元素中時觸發此事件。
//alert("this is selecting");
},
start :function(event, ui) { //當選擇一個元素前觸發此事件。
//alert("this is start");
},
stop :function(event, ui) { //當選定一個元素結束時觸發此事件。
//alert("this is stop");
},
unselected :function(event, ui) { //當取消選定某一個元素后觸發此事件。
//alert("this is unselected");
},
unselecting :function(event, ui) { //當取消選定某一個元素中觸發此事件。
//alert("this is unselecting");
}
});
function selectable_fun(){
//=================方法
//$("#selectable_div").selectable("destroy"); //銷毀元素多選功能實例
$("#selectable_div").selectable("disable"); //禁用元素的多選功能。
$("#selectable_div").selectable("enable"); //啟用元素的多選功能。
$("#selectable_div").selectable("option","disabled",true);//為指定屬性賦值，第二參數為selectable的一個屬性名，第三參數為可以為該屬性賦的值
$("#selectable_div").selectable("option","disabled"); //獲取指定屬性的值，第二參數為selectable的一個屬性名
$("#selectable_div").selectable("refresh"); //用於手動刷新、重新計算每個選中元素的位置和大小。當autoRefresh設置成false，此方法對於刷新大量選中項非常有用。
$("#selectable_div").selectable("widget"); //返回該可多選元素的JQuery對象
}
</script>








<!--==============================sortable============================-->
<!--==================================================================-->
<input type="button" value="sortable_fun" onclick="sortable_fun();" />
<div id="sortable_div">
<div class="ui-state-default">Item 1</div>
<div class="ui-state-default">Item 2</div>
<div class="ui-state-default">Item 3</div>
<div class="ui-state-default">Item 4</div>
<div class="ui-state-default">Item 5</div>
<div class="ui-state-default">Item 6</div>
<div class="ui-state-default">Item 7</div>
</div>
<script language="JavaScript" type="text/javascript">
$("#sortable_div").sortable({
//=================屬性
appendTo : "parent", //指定排序過程中將輔助元素追加到何處。默認值 "parent"
axis : "y", //指定條目的拖動方向。可選值："x", "y"。默認值 false
cancel : ":input,button", //指定禁止排序的元素。默認值 ":input,button"
connectWith : false, //允許排序列表連接另一個排序列表，將條目拖動至另一個列表中去，可用JQuery選擇器形式。默認值 false
containment : false, //約束排序動作只能在一個指定的范圍內發生。可選值：DOM對象, "parent", "document", "window", 或jQuery對象。默認值 false
cursor : "move", //指定排序時鼠標的CSS樣式。默認值 "auto"
cursorAt : { //指定拖動條目時，光標出現的位置，取值是對象，可以包含top、left、right、Bottom屬性中的一個或兩個。 默認值 false
top:5,
left: 5
},
delay : 0, //以毫秒為單位，設置延遲多久才激活排序動作。此參數可防止誤點擊。默認值 0
disabled : false, //當設為true時該排序實例將不可用。默認值 false
distance : 1, //決定至少要在元素上面拖動多少像素后，才正式觸發排序動作。默認值 1
dropOnEmpty : true, //是否允許拖拽到一個空列表的sortable對象中。默認值 true
forceHelperSize : false, //是否強制輔助元素具有尺寸。默認值 false
forcePlaceholderSize : false, //是否強制占有符具有尺寸。默認值 false
grid : [ 20, 10 ], //使條目或輔助元素對齊網格，取值為數組 [數值,數值] 分別表示網格的寬度和高度。默認值 false
handle : false, //指定條目的拖動手柄，可用JQuery選擇器形式。默認值 false
helper : "original", //指定顯示的輔助元素，可選值："original"或"clone"，若為函數則函數返回一個DOM元素。默認值 "original"
items : "> *", //指定列表中可以排序的條目。默認值 "> *"
opacity : 0.5, //指定輔助元素的不透明度0.01~1。默認值 false
placeholder : "sortable-placeholder", //指定排序時，空白占位的CSS樣式。默認值 false
revert : true, //是否支持動畫效果，或指定動畫毫秒數。默認值 false
scroll : true, //是否元素拖動到邊緣時自動滾動。默認值 true
scrollSensitivity : 20, //指定元素拖動到距離邊緣多少像素時開始滾動。默認值 20
scrollSpeed : 20, //指定滾動的速度。默認值 20
tolerance : "intersect", //設置拖動元素拖動多少距離時開始排序，可選值："intersect"和"pointer"，前者表示重疊50%，后者表示重疊。默認值 "intersect"
zIndex : 1000, //指定輔助元素的z-Index值。默認值 1000
//=================事件
create :function(event, ui) { //當創建sortable實例時觸發
//alert("this is create");
},
start :function(event, ui) { //當開始排序時觸發
//alert("this is start");
},
sort :function(event, ui) { //當排序期間觸發
//alert("this is sort");
},
change :function(event, ui) { //當元素發生排序且坐標已發生改變時觸發此事件。
//alert("this is change");
},
beforeStop :function(event, ui) { //當排序動作結束之前觸發此事件。此時占位符元素和輔助元素仍有效。
//alert("this is beforeStop");
},
stop :function(event, ui) { //排序動作結束時觸發此事件。
//alert("this is stop");
},
update :function(event, ui) { //當排序動作結束時且元素坐標已經發生改變時觸發此事件。
//alert("this is update");
},
receive :function(event, ui) { //當一個已連接的sortable對象接收到另一個sortable對象的元素后觸發此事件。
//alert("this is receive");
},
remove :function(event, ui) { //當一個元素從一個sortable對象拖了出來，並進入另一個sortable對象時觸發
//alert("this is remove");
},
over :function(event, ui) { //當一個元素拖拽移動時覆蓋其他元素位置時觸發此事件。
//alert("this is over");
},
out :function(event, ui) { //當一個元素拖拽移出原位置並再次確定位置后，或移動超出sortable對象位置范圍時觸發此事件。
//alert("this is out");
},
activate :function(event, ui) { //當一個sortable對象開始排序動作時，該事件關聯到所有與該實例連接着的排序列表。
//alert("this is activate");
},
deactivate :function(event, ui) { //當排序停止后觸發，該事件關聯到所有與該實例連接着的排序列表
//alert("this is deactivate");
}

});

function sortable_fun(){
//=================方法
$("#sortable_div").sortable( "cancel" ); //取消當前sortable對象中item元素的排序改變。
//$("#sortable_div").sortable( "destroy" ); //銷毀該sortable對象。
$("#sortable_div").sortable( "disable" ); //禁用該sortable對象排序功能
$("#sortable_div").sortable( "enable" ); //開啟該sortable對象排序功能
$("#sortable_div").sortable( "option" , "disabled" , false ); //為指定屬性賦值，第二參數為sortable的一個屬性名，第三參數為可以為該屬性賦的值
$("#sortable_div").sortable( "option" , "disabled" ); //獲取指定屬性的值，第二參數為sortable的一個屬性名
$("#sortable_div").sortable( "refresh" ); //刷新排序的元素。觸發重新加載的所有排序的元素，使新元素可用。
$("#sortable_div").sortable( "refreshPositions" ); //刷新排序條目的緩存位置
$("#sortable_div").sortable( "serialize", { key: "sort" } ); //將項目ID排序成一個form或ajax的提交字符串，提交時key對應的值相當表單中的元素名，調用此方法產生的哈希值，可以附加到任何URL
$("#sortable_div").sortable( "toArray" ); //將排序的條目id序列化成字符串數組
$("#sortable_div").sortable( "widget" ); //返回該排序的JQuery對象
}
</script>