jQuery UI-Draggable 參數集合

時間 2019-12-09

原文原文鏈接

·概述
在任何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] )javascript

<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>