jquery ui draggable

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