·概述
在任何DOM元素啟用拖動功能。通過單擊鼠標並拖動對象在窗口內的任何地方移動。
官方示例地址：http://jqueryui.com/demos/draggable/
所有的事件回調函數都有兩個參數：event和ui，瀏覽器自有event對象，和經過封裝的ui對象
ui.helper - 表示被拖拽的元素的JQuery對象
ui.position - 表示相對當前對象，鼠標的坐標值對象{top,left}
ui.offset - 表示相對於當前頁面，鼠標的坐標值對象{top,left}
·參數（參數名 : 參數類型 : 默認值）
addClasses : Boolean : true
如果設置成false，將在加載時阻止ui-draggable樣式的加載。
當有很多對象要加載draggable()插件的情況下，這將對性能有極大的優化。
初始: $('.selector').draggable({ addClasses: false });
獲取: var addClasses = $('.selector').draggable('option', 'addClasses');
設置: $('.selector').draggable('option', 'addClasses', false);
appendTo : Element,Selector : 'parent'
The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.
初始：$('.selector').draggable({ appendTo: 'body' });
獲取：var appendTo = $('.selector').draggable('option', 'appendTo');
設置：$('.selector').draggable('option', 'appendTo', 'body');
axis : String : false
約束拖動的動作只能在X軸或Y軸上執行，可選值：'x', 'y'。
初始：$('.selector').draggable({ axis: 'x' });
獲取：var axis = $('.selector').draggable('option', 'axis');
設置：$('.selector').draggable('option', 'axis', 'x');
cancel : Selector : ':input,option'
防止在指定的對象上開始拖動。
初始：$('.selector').draggable({ cancel: 'button' });
獲取：var cancel = $('.selector').draggable('option', 'cancel');
設置：$('.selector').draggable('option', 'cancel', 'button');
connectToSortable : Selector : false
允許draggable被拖拽到指定的sortables中，如果使用此選項helper屬性必須設置成clone才能正常工作。
初始：$('.selector').draggable({ connectToSortable: 'ul#myList' });
獲取：var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
設置：$('.selector').draggable('option', 'connectToSortable', 'ul#myList');
containment : Selector,Element,String, Array : false
強制draggable只允許在指定元素或區域的范圍內移動，可選值：'parent', 'document', 'window', [x1, y1, x2, y2].
初始：$('.selector').draggable({ containment: 'parent' });
獲取：var containment = $('.selector').draggable('option', 'containment');
設置：$('.selector').draggable('option', 'containment', 'parent');
cursor : String : 'auto'
指定在做拖拽動作時，鼠標的CSS樣式。
初始：$('.selector').draggable({ cursor: 'crosshair' });
獲取：var cursor = $('.selector').draggable('option', 'cursor');
設置：$('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt : Object : false
當開始移動時，鼠標定位在的某個位置上（最多兩個方向）。可選值：{ top, left, right, bottom }.
初始：$('.selector').draggable({ cursorAt: { left: 5 } });
獲取：var cursorAt = $('.selector').draggable('option', 'cursorAt');
設置：$('.selector').draggable('option', 'cursorAt', { left: 5 });
delay : Integer : 0
當鼠標點下后，延遲指定時間后才開始激活拖拽動作（單位：毫秒）。此選項可以用來防止不想要的拖累元素時的誤點擊。
初始：$('.selector').draggable({ delay: 500 });
獲取：var delay = $('.selector').draggable('option', 'delay');
設置：$('.selector').draggable('option', 'delay', 500);
distance : Integer : 1
當鼠標點下后，只有移動指定像素后才開始激活拖拽動作。
初始：$('.selector').draggable({ distance: 30 });
獲取：var distance = $('.selector').draggable('option', 'distance');
設置：$('.selector').draggable('option', 'distance', 30);
grid : Array : false
拖拽元素時，只能以指定大小的方格進行拖動。可選值：[x,y]
初始：$('.selector').draggable({ grid: [50, 20] });
獲取：var grid = $('.selector').draggable('option', 'grid');
設置：$('.selector').draggable('option', 'grid', [50, 20]);
handle : Element, Selector : false
限制只能在拖拽元素內的指定元素開始拖拽。
初始：$('.selector').draggable({ handle: 'h2' });
獲取：var handle = $('.selector').draggable('option', 'handle');
設置：$('.selector').draggable('option', 'handle', 'h2');
helper : String, Function : 'original'
拖拽元素時的顯示方式。（如果是函數，必須返回值是一個DOM元素）可選值：'original', 'clone', Function
初始：$('.selector').draggable({ helper: 'clone' });
獲取：var helper = $('.selector').draggable('option', 'helper');
設置：$('.selector').draggable('option', 'helper', 'clone');
iframeFix : Boolean, Selector : false
可防止當mouseover事件觸發拖拽動作時，移動過iframes並捕獲到它（內部內容），如果設置成true，則屏蔽層會覆蓋頁面的iframe。如果設置成對應的選擇器，則屏蔽層會覆蓋相匹配的iframe。
初始：$('.selector').draggable({ iframeFix: true });
獲取：var iframeFix = $('.selector').draggable('option', 'iframeFix');
設置：$('.selector').draggable('option', 'iframeFix', true);
opacity : Float : false
當元素開始拖拽時，改變元素的透明度。
初始：$('.selector').draggable({ opacity: 0.35 });
獲取：var opacity = $('.selector').draggable('option', 'opacity');
設置：$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions : Boolean : false
如果設置成true，所有移動過程中的坐標都會被記錄。（注意：此功能將影響性能）
初始：$('.selector').draggable({ refreshPositions: true });
獲取：var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
設置：$('.selector').draggable('option', 'refreshPositions', true);
revert : Boolean, String : false
當元素拖拽結束后，元素回到原來的位置。
初始：$('.selector').draggable({ revert: true });
獲取：var revert = $('.selector').draggable('option', 'revert');
設置：$('.selector').draggable('option', 'revert', true);
revertDuration : Integer : 500
當元素拖拽結束后，元素回到原來的位置的時間。（單位：毫秒）
初始：$('.selector').draggable({ revertDuration: 1000 });
獲取：var revertDuration = $('.selector').draggable('option', 'revertDuration');
設置：$('.selector').draggable('option', 'revertDuration', 1000);
scope : String : 'default'
設置元素只允許拖拽到具有相同scope值的元素。
初始：$('.selector').draggable({ scope: 'tasks' });
獲取：var scope = $('.selector').draggable('option', 'scope');
設置：$('.selector').draggable('option', 'scope', 'tasks');
scroll : Boolean : true
如果設置為true，元素拖拽至邊緣時，父容器將自動滾動。
初始：$('.selector').draggable({ scroll: false });
獲取：var scroll = $('.selector').draggable('option', 'scroll');
設置：$('.selector').draggable('option', 'scroll', false);
scrollSensitivity : Integer : 20
當元素拖拽至邊緣時，父窗口一次滾動的像素。
初始：$('.selector').draggable({ scrollSensitivity: 40 });
獲取：var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
設置：$('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed : Integer : 20
當元素拖拽至邊緣時，父窗口滾動的速度。
初始：$('.selector').draggable({ scrollSpeed: 40 });
獲取：var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
設置：$('.selector').draggable('option', 'scrollSpeed', 40);
snap : Boolean, Selector : false
當設置為true或元素標簽時，元素拖動到其它元素的邊緣時，會自動吸附其它元素。
初始：$('.selector').draggable({ snap: 'span' });
獲取：var snap = $('.selector').draggable('option', 'snap');
設置：$('.selector').draggable('option', 'snap', 'span');
snapMode : String : 'both'
確定拖拽的元素吸附的模式。可選值：'inner', 'outer', 'both'
初始：$('.selector').draggable({ snapMode: 'outer' });
獲取：var snapMode = $('.selector').draggable('option', 'snapMode');
設置：$('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance : Integer : 20
確定拖拽的元素移動至其它元素多少像素的距離時，發生吸附的動作。
初始：$('.selector').draggable({ snapTolerance: 40 });
獲取：var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
設置：$('.selector').draggable('option', 'snapTolerance', 40);
stack : Object : false
Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.
初始：$('.selector').draggable({ stack: { group: 'products', min: 50 } });
獲取：var stack = $('.selector').draggable('option', 'stack');
設置：$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex : Integer : false
控制當拖拽元素時，改變元素的z-index值。
初始：$('.selector').draggable({ zIndex: 2700 });
獲取：var zIndex = $('.selector').draggable('option', 'zIndex');
設置：$('.selector').draggable('option', 'zIndex', 2700);
·事件
start
當鼠標開始拖拽時，觸發此事件。
初始：$('.selector').draggable({ start: function(event, ui){...} });
綁定：$('.selector').bind('dragstart', function(event, ui){...});
drag
當鼠標拖拽移動時，觸發此事件。
初始：$('.selector').draggable({ drag: function(event, ui){...} });
綁定：$('.selector').bind('drag', function(event, ui){...});
stop
當鼠標松開時，觸發此事件。
初始：$('.selector').draggable({ stop: function(event, ui){...} });
綁定：$('.selector').bind('dragstop', function(event, ui){...});
·方法
destory
從元素中移除拖拽功能。
用法：.draggable( 'destroy' )
disable
禁用元素的拖拽功能。
用法：.draggable( 'disable' )
enable
啟用元素的拖拽功能。
用法：.draggable( 'enable' )
option
獲取或設置元素的參數。
用法：.draggable( 'option' , optionName , [value] )
<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>