[原文翻譯]
JQuery UI Draggable插件用來(lái)使選中的元素可以通過(guò)鼠標(biāo)拖動(dòng).
Draggable的元素受影響css: ui-draggable, 拖動(dòng)過(guò)程中的css: ui-draggable-dragging.
如果需要的不僅僅是拖, 而是一個(gè)完整的拖放功能, 請(qǐng)參閱JQuery UI 的Droppable插件, 該插件提供了一個(gè)draggable放的目標(biāo).
所有的回調(diào)函數(shù)(start, stop, drag等事件)接受兩個(gè)參數(shù):
event: 瀏覽器原生的事件
ui: 一個(gè)JQuery的ui對(duì)象, 其中有以下主要屬性
   ui.helper: 正在拖動(dòng)的元素的JQuery包裝對(duì)象, ui.helper.context可以獲取到原生的DOM元素.
   ui.position: ui.helper(也就是我們要拖動(dòng)的元素)相對(duì)于父元素(包含自己的元素, 如果是頂層, 對(duì)應(yīng)body)的偏移, 值是一個(gè)對(duì)象{top, left}----也就是可以用ui.position.top獲取到該元素與父元素的top當(dāng)前偏移
   ui.offset: 與ui.position同意, 這里表示的是和瀏覽器內(nèi)容區(qū)域左上邊界的偏移(注意, 是內(nèi)容區(qū)域, 而不是html的body區(qū)域.   html的body在默認(rèn)情況下, 各種瀏覽器中都會(huì)相對(duì)offset有偏移的.)
[選項(xiàng)]
addClasses:
[類型]Boolean(布爾值)
[默認(rèn)值]true
[產(chǎn)生影響]
   用來(lái)設(shè)置是否給draggable元素通過(guò)ui-draggable樣式才裝飾它. 主要為了在通過(guò).draggable()初始化很多(成百個(gè))元素的時(shí)候優(yōu)化性能考慮, 但是, 這個(gè)選項(xiàng)的設(shè)置, 不會(huì)影響ui-draggable-dragging樣式改變拖動(dòng)過(guò)程樣式.
   true表示ui-draggable樣式被添加到該元素.
   false表示ui-draggable樣式不被添加到該元素.
[代碼示例]draggable其他選項(xiàng)的初始化, 獲取屬性值, 設(shè)置屬性值部分除有特殊功能, 不再贅述, 僅粘貼代碼.
   [初始化]
   $('.selector').draggable({ addClasses: false });
   將.selector選擇器選中的元素渲染成為一個(gè)可拖動(dòng)控件, 不為其添加ui-draggable樣式
   [獲取屬性值]
   var addClasses = $('#draggable').draggable('option', 'addClasses');
   獲取.selector選擇器選中的可拖動(dòng)控件的addClasses選項(xiàng)的值.
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'addClasses', false);
   將.selector選擇器選中的可拖動(dòng)控件的addClasses選項(xiàng)值設(shè)置為false.
appendTo:
[類型]Element, Selector(HTML元素對(duì)象或選擇器)
[默認(rèn)值]'parent' 父元素
[產(chǎn)生影響]
   用來(lái)指定控件在拖動(dòng)過(guò)程中ui.helper的容器, 默認(rèn)情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.
[代碼示例]
   [初始化]
   $('.selector').draggable({ appendTo: 'body' });
   [獲取屬性值]
   //getter
   var appendTo = $('.selector').draggable('option', 'appendTo');
   [設(shè)置屬性值]
   //setter
   $('.selector').draggable('option', 'appendTo', 'body');.
axis:
[類型]String, Boolean(可取的值有'x', 'y', false)
   'x': 只能水平拖動(dòng)
   'y': 只能垂直拖動(dòng)
   false: 既可以水平, 也可以垂直拖動(dòng).
[默認(rèn)值]false, 不限制拖動(dòng)的方向
[產(chǎn)生影響]
   約束拖動(dòng)過(guò)程中的取向.
[代碼示例]
   [初始化]
   $('.selector').draggable({ axis: 'x' });
   [獲取屬性值]
   var axis = $('.selector').draggable('option', 'axis');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'axis', 'x');
cancel:
[類型]選擇器
[默認(rèn)值]':input, option'
[產(chǎn)生影響]
   通過(guò)選擇器指定這類元素不能被渲染成draggable控件.
[代碼示例]
   [初始化]
   $('.selector').draggable({ cancel: 'button' });
   [獲取屬性值]
   var cancel = $('.selector').draggable('option', 'cancel');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'cancel', 'button');
connectToSortable: 此選項(xiàng)需要和sortable聯(lián)合工作, 再議.
[類型]選擇器
[默認(rèn)值]':input, option'
[產(chǎn)生影響]
   通過(guò)選擇器指定這類元素不能被渲染成draggable控件.
[代碼示例]
   [初始化]
   $('.selector').draggable({ cancel: 'button' });
   [獲取屬性值]
   var cancel = $('.selector').draggable('option', 'cancel');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'cancel', 'button');
containment:
[類型]選擇器, 元素, 字符串, 數(shù)組.
   選擇器: 只能在選擇器約束的元素內(nèi)拖動(dòng)
   元素: 只能在給定的元素內(nèi)拖動(dòng)
   字符串:
    parent: 只能在父容器內(nèi)拖動(dòng)
    document: 在當(dāng)前html文檔的document下可拖動(dòng), 超出瀏覽器窗口范圍時(shí), 自動(dòng)出現(xiàn)滾動(dòng)條
    widow: 只能在當(dāng)前瀏覽器窗口的內(nèi)容區(qū)域拖動(dòng), 拖動(dòng)超出當(dāng)前窗口范圍, 不會(huì)導(dǎo)致出現(xiàn)滾動(dòng)條...
   數(shù)組: [x1, y1, x2, y2]以[開(kāi)始水平坐標(biāo), 開(kāi)始垂直坐標(biāo), 結(jié)束水平坐標(biāo), 結(jié)束垂直坐標(biāo)]的方式劃定一個(gè)區(qū)域, 只能在此區(qū)域內(nèi)拖動(dòng). 這種方式指定時(shí), 值是相對(duì)當(dāng)前瀏覽器窗口內(nèi)容區(qū)域左上角的偏移值.
   false: 不限制拖動(dòng)的活動(dòng)范圍
[默認(rèn)值]false
[產(chǎn)生影響]
   影響指定可拖動(dòng)控件的活動(dòng)區(qū)域.
[代碼示例]
   [初始化]
   $('.selector').draggable({ containment: 'parent' });
   [獲取屬性值]
   var containment = $('.selector').draggable('option', 'containment');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'containment', 'parent');
cursor:
[類型]字符串.
[默認(rèn)值]'auto'
[產(chǎn)生影響]
   影響指定可拖動(dòng)控件在拖動(dòng)過(guò)程中的鼠標(biāo)樣式, 該樣式設(shè)定之后, 需要控件的原始元素支持指定的cursor樣式, 如果指定的值原始元素不支持, 則使用原始元素默認(rèn)的cursor樣式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair這個(gè)鼠標(biāo)樣式, 所以, 會(huì)以默認(rèn)形式顯示.
[代碼示例]
   [初始化]
   $('.selector').draggable({ cursor: 'crosshair' });
   [獲取屬性值]
   var cursor = $('.selector').draggable('option', 'cursor');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[類型]對(duì)象
   通過(guò)設(shè)置對(duì)象的top, left, right, bottom的屬性值中的一個(gè)或兩個(gè)來(lái)確定位置.
[默認(rèn)值]false
[產(chǎn)生影響]
   在拖動(dòng)控件的過(guò)程中, 鼠標(biāo)在控件上顯示的位置, 值為false(默認(rèn))時(shí), 從哪里點(diǎn)擊開(kāi)始拖動(dòng), 鼠標(biāo)位置就在哪里, 如果設(shè)置了, 就會(huì)在一個(gè)相對(duì)控件自身左上角偏移位置處, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖動(dòng)過(guò)程中, 鼠標(biāo)就會(huì)在自身的左上角向下向右各偏移8像素處.
[代碼示例]
   [初始化]
   $('.selector').draggable({ cursor: 'crosshair' });
   [獲取屬性值]
   var cursor = $('.selector').draggable('option', 'cursor');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'cursor', 'crosshair');
delay:
[類型]整數(shù), 單位是毫秒
[默認(rèn)值]0
[產(chǎn)生影響]
   可拖動(dòng)控件從鼠標(biāo)左鍵按下開(kāi)始, 到拖動(dòng)效果產(chǎn)生的延時(shí). 該選項(xiàng)可以被用來(lái)阻止一些不期望的點(diǎn)擊帶來(lái)的無(wú)效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 到delay指定的時(shí)間, 如果鼠標(biāo)左鍵還沒(méi)有松開(kāi), 那么就認(rèn)為這次拖動(dòng)有效, 否則, 認(rèn)為這次拖動(dòng)無(wú)效.
[代碼示例]
   [初始化]
   $('.selector').draggable({ delay: 500 });
   [獲取屬性值]
   var delay = $('.selector').draggable('option', 'delay');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'delay', 500);
distance:
[類型]整數(shù), 單位是像素
[默認(rèn)值]1
[產(chǎn)生影響]
   可拖動(dòng)控件從鼠標(biāo)左鍵按下開(kāi)始, 到拖動(dòng)效果產(chǎn)生的時(shí)鼠標(biāo)必須產(chǎn)生的位移. 該選項(xiàng)可以被用來(lái)阻止一些不期望的點(diǎn)擊帶來(lái)的無(wú)效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 只有當(dāng)鼠標(biāo)產(chǎn)生的位移達(dá)到distance指定的值時(shí), 才認(rèn)為是有效的拖動(dòng).
[代碼示例]
   [初始化]
   $('.selector').draggable({ distance: 30 });
   [獲取屬性值]
   var distance = $('.selector').draggable('option', 'distance');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'distance', 30);
grid:
[類型]數(shù)組[x, y], x代表水平大小, y代表垂直大小, 單位是像素
[默認(rèn)值]false
[產(chǎn)生影響]
   可拖動(dòng)控件拖動(dòng)時(shí)采用grid的方式拖動(dòng), 也就是說(shuō)拖動(dòng)過(guò)程中的單位是guid選項(xiàng)指定的數(shù)組描述的格子那么大.
[代碼示例]
   [初始化]
   $('.selector').draggable({ grid: [50, 20] });
   [獲取屬性值]
   var grid = $('.selector').draggable('option', 'grid');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'grid', [50, 20]);
handle:
[類型]選擇器或元素
[默認(rèn)值]false
[產(chǎn)生影響]
   指定觸發(fā)拖動(dòng)的元素. 用法: 將一個(gè)id=window的div設(shè)置為可拖動(dòng)控件, 設(shè)置它的handle是該div中的一個(gè)id=title的span, 那么, 就只有在id=title的span上點(diǎn)擊拖動(dòng)才是有效的.   注意: 該元素一定要是可拖動(dòng)控件的子元素.
[代碼示例]
   [初始化]
   $('.selector').draggable({ handle: 'h2' });
   [獲取屬性值]
   var handle = $('.selector').draggable('option', 'handle');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'handle', 'h2');
helper:
[類型]字符串或函數(shù)
   字符串取值:
    'original': 可拖動(dòng)控件本身移動(dòng)
    'clone': 將可拖動(dòng)控件自身克隆一個(gè)移動(dòng), 自身在原始位置不變
   函數(shù)則必須返回一個(gè)DOM元素: 以函數(shù)返回的DOM元素移動(dòng)展現(xiàn)拖動(dòng)的過(guò)程.
[默認(rèn)值]'original'
[產(chǎn)生影響]
   拖動(dòng)過(guò)程中幫助用戶知道當(dāng)前拖動(dòng)位置的元素.
[代碼示例]
   [初始化]
   $('.selector').draggable({ helper: 'clone' });
   [獲取屬性值]
   var helper = $('.selector').draggable('option', 'helper');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[類型]布爾值或選擇器, 選擇器的選擇結(jié)果需要是iframe元素
[默認(rèn)值]false
[產(chǎn)生影響]
   阻止拖動(dòng)過(guò)程中由于鼠標(biāo)指針在iframe區(qū)域移動(dòng), iframe對(duì)鼠標(biāo)移動(dòng)事件的默認(rèn)響應(yīng).
   如果設(shè)置為true, 將會(huì)阻止拖動(dòng)過(guò)程中當(dāng)前頁(yè)面上所有的iframe的mousemove事件, 如果設(shè)置一個(gè)選擇器, 將會(huì)阻止指定的iframe的mousemove事件.
[代碼示例]
   [初始化]
   $('.selector').draggable({ iframeFix: true });
   [獲取屬性值]
   var iframeFix = $('.selector').draggable('option', 'iframeFix');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'iframeFix', true);
opacity:
[類型]浮點(diǎn)數(shù)值
[默認(rèn)值]false
[產(chǎn)生影響]
   拖動(dòng)過(guò)程中helper(拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的控件)的不透明度.
[代碼示例]
   [初始化]
   $('.selector').draggable({ opacity: 0.35 });
   [獲取屬性值]
   var opacity = $('.selector').draggable('option', 'opacity');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[類型]Boolean
[默認(rèn)值]false
[產(chǎn)生影響]
   如果設(shè)置為true, 所有的droppable位置會(huì)在每次mousemove事件中進(jìn)行計(jì)算.
   注意: 該選項(xiàng)主要用于解決高級(jí)動(dòng)態(tài)頁(yè)面展現(xiàn)問(wèn)題. 慎用.
[代碼示例]
   [初始化]
   $('.selector').draggable({ refreshPositions: true });
   [獲取屬性值]
   var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'refreshPositions', true);
revert:
[類型]Boolean, 字符串
[默認(rèn)值]false
[產(chǎn)生影響]
   影響一次拖動(dòng)之后是否回歸到原始位置.
   true: 每次拖動(dòng)停止之后, 元素自動(dòng)回到原始位置
   'invalid': 除非是一個(gè)droppable并且被drop(放)成功了, 才不將元素返回到原始位置.
   'valid': 除invalid之外的其他情況.
[代碼示例]
   [初始化]
   $('.selector').draggable({ revert: true });
   [獲取屬性值]
   var revert = $('.selector').draggable('option', 'revert');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'revert', true);
revertDuration:
[類型]整數(shù)
[默認(rèn)值]500
[產(chǎn)生影響]
   revert(回歸到原始位置)整個(gè)過(guò)程需要的時(shí)間, 單位是毫秒. 如果設(shè)置revert選項(xiàng)設(shè)置為false, 則忽略此屬性.
[代碼示例]
   [初始化]
   $('.selector').draggable({ revertDuration: 1000 });
   [獲取屬性值]
   var revertDuration = $('.selector').draggable('option', 'revertDuration');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'revertDuration', 1000);
scope:
[類型]字符串
[默認(rèn)值]'default'
[產(chǎn)生影響]
   該選項(xiàng)描述一個(gè)范圍, 和droppable的同名選項(xiàng)結(jié)合使用, droppable的accept選項(xiàng)用來(lái)設(shè)置可以接受的draggable控件, 同時(shí), 可接受的drggable控件受scope選項(xiàng)約束, 必須是同一個(gè)scope中的draggable和droppable才可以互相拖放.
   例如:
   $('#draggable_a').draggable({scope: 'a'});
   $('#draggable_b').draggable({scope: 'b'});
   $('#droppable_a').droppable({scope: 'a'});
   $('#droppable_b').droppable({scope: 'b'});
   droppable控件的accept選項(xiàng)默認(rèn)是'*', 看起來(lái)數(shù)draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的約束, draggable_a只能放入到droppable_a, draggable_b只能發(fā)乳到droppable_b中.
   注意: 這個(gè)選項(xiàng)就和變量的名稱空間的意義類似. 默認(rèn)值是'default', 說(shuō)明如果不指定, 大家都還是有scope的, 名字是default而已.
[代碼示例]
   [初始化]
   $('.selector').draggable({ scope: 'tasks' });
   [獲取屬性值]
   var scope = $('.selector').draggable('option', 'scope');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'scope', 'tasks');
scroll:
[類型]Boolean
[默認(rèn)值]true
[產(chǎn)生影響]
   如果設(shè)置為true, 在拖動(dòng)過(guò)程中超出可拖動(dòng)控件容器的時(shí)候, 容器自動(dòng)增加滾動(dòng)條
[代碼示例]
   [初始化]
   $('.selector').draggable({ scroll: false });
   [獲取屬性值]
   var scope = $('.selector').draggable('option', 'scope');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'scroll', false);
scrollSensitivity:
[類型]整數(shù)值
[默認(rèn)值]20
[產(chǎn)生影響]
   滾動(dòng)條的敏感度.
   下面所屬的鼠標(biāo)指針是指在draggable控件移動(dòng)過(guò)程中, 鼠標(biāo)所處位置.
   鼠標(biāo)指針和與draggable控件所在容器的邊距離為多少的時(shí)候, 滾動(dòng)條開(kāi)始滾動(dòng).
[代碼示例]
   [初始化]
   $('.selector').draggable({ scrollSensitivity: 40 });
   [獲取屬性值]
   var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[類型]整數(shù)值
[默認(rèn)值]20
[產(chǎn)生影響]
   由于scrollSensitivity導(dǎo)致的滾動(dòng)發(fā)生時(shí), 滾動(dòng)條一次滾動(dòng)多少像素值.
[代碼示例]
   [初始化]
   $('.selector').draggable({ scrollSpeed: 40 });
   [獲取屬性值]
   var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[類型]Boolean, 選擇器
[默認(rèn)值]false
[產(chǎn)生影響]
   吸附功能, 設(shè)置為true等價(jià)與設(shè)置選擇器.ui-draggable, 具體效果是在選擇器指定的所有元素上, 當(dāng)前的draggable控件都可以實(shí)現(xiàn)吸附功能, 吸附就是拖動(dòng)過(guò)程中, 靠近但是還沒(méi)有挨上目標(biāo)組件是, 自動(dòng)的將正在拖動(dòng)的組件吸過(guò)去.
[代碼示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [獲取屬性值]
   var snap = $('.selector').draggable('option', 'snap');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'snap', true);
snapMode:
[類型]字符串, 可選值如下
   'inner': 在指定的元素內(nèi)部可以吸附
   'outer': 在指定元素外部可以吸附
   'both': 里面外面都可以吸附.
[默認(rèn)值]'both'
[產(chǎn)生影響]
   設(shè)定吸附時(shí)候的模式.
[代碼示例]
   [初始化]
   $('.selector').draggable({ snapMode: 'outer' });
   [獲取屬性值]
   var snapMode = $('.selector').draggable('option', 'snapMode');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[類型]整數(shù)
[默認(rèn)值]20
[產(chǎn)生影響]
   設(shè)定離目標(biāo)對(duì)象的邊多少像素的時(shí)候, 進(jìn)行吸附.
[代碼示例]
   [初始化]
   $('.selector').draggable({ snap: true });
   [獲取屬性值]
   var snap = $('.selector').draggable('option', 'snap');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'snap', true);
stack:
[類型]對(duì)象{group: '.selector', min: 50}
[默認(rèn)值]false
[產(chǎn)生影響]
   一次初始化一組draggable控件的時(shí)候, 將其中的一些draggable控件以給定選擇器選擇, 作為一組, 這時(shí), 這一組draggable控件就可以實(shí)現(xiàn)當(dāng)前被拖動(dòng)的始終在最前效果, min用來(lái)指定這一組的z-index值的最小值.
[代碼示例]
   [初始化]
   $('.selector').draggable({ stack: { group: 'products', min: 50 } });
   [獲取屬性值]
   var stack = $('.selector').draggable('option', 'stack');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[類型]整數(shù)
[默認(rèn)值]false
[產(chǎn)生影響]
   拖動(dòng)時(shí)的helper(跟隨鼠標(biāo)移動(dòng)的控件)的z-index值. z-index就是css中的層疊層數(shù), 數(shù)值越大, 越在上層.
[代碼示例]
   [初始化]
   $('.selector').draggable({ zIndex: 2700 });
   [獲取屬性值]
   var zIndex = $('.selector').draggable('option', 'zIndex');
   [設(shè)置屬性值]
   $('.selector').draggable('option', 'zIndex', 2700);
[事件]
start: 拖動(dòng)開(kāi)始, 指鼠標(biāo)按下, 開(kāi)始移動(dòng).
[類型]dragstart
[回調(diào)函數(shù)接受的參數(shù)]
   event: 原生的瀏覽器事件.
   ui: JQuery的ui對(duì)象
   this: 當(dāng)前拖動(dòng)的控件DOM對(duì)象
drag: 拖動(dòng)過(guò)程中鼠標(biāo)移動(dòng).
[類型]drag
[回調(diào)函數(shù)接受的參數(shù)]
   event: 原生的瀏覽器事件.
   ui: JQuery的ui對(duì)象
   this: 當(dāng)前拖動(dòng)的控件DOM對(duì)象
stop: 拖動(dòng)結(jié)束.
[類型]dragstop
[回調(diào)函數(shù)接受的參數(shù)]
   event: 原生的瀏覽器事件.
   ui: JQuery的ui對(duì)象
   this: 當(dāng)前拖動(dòng)的控件DOM對(duì)象
[代碼示例]
初始化時(shí)設(shè)置事件.
$('.selector').draggable({
     start: function(event, ui) { alert(this); },
     drag: function(event, ui) { alert(this); },
     stop: function(event, ui) { alert(this); }
});
動(dòng)態(tài)的綁定事件. 動(dòng)態(tài)綁定時(shí)候, 使用的事件名就是事件的類型.
$(".selector").bind('dragstart', function(event, ui) {
   alert(this);
});
$(".selector").bind('drag', function(event, ui) {
   alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
   alert(this);
});
[方法]
destroy: 完全移除一個(gè)可拖動(dòng)控件, 使其回退到該元素被初始化成可拖動(dòng)控件之前的狀態(tài).
[代碼示例]
   $(".selector").progressbar('destroy');
將之前初始化的.selector指定的可拖動(dòng)控件銷毀, 使其返回初始化之前的狀態(tài).
disable: 將可拖動(dòng)控件樣式改變成為失效, 與enable對(duì)應(yīng).
enable: 將可拖動(dòng)控件樣式改變?yōu)樵试S, 與disable對(duì)應(yīng).
option: 獲取或設(shè)置可拖動(dòng)控件的選項(xiàng), 第二個(gè)參數(shù)是選項(xiàng)名, 第三個(gè)參數(shù)是值. 如果不指定值, 就是獲取, 指定值, 就是設(shè)置.

[總結(jié)]
addClasses: 用來(lái)設(shè)置是否添加ui-draggable樣式.
appendTo: 設(shè)置追加到什么地方
axis: 設(shè)置拖動(dòng)的方向
cancel, handle: 設(shè)置控制整個(gè)控件拖動(dòng)動(dòng)作的區(qū)域, cancel指定區(qū)域不能拖動(dòng), handle指定區(qū)域控制控件拖動(dòng).
connectToSortable: 需要和sortable集成.
containment: 設(shè)置控件可拖動(dòng)范圍
cursor, cursorAt: 設(shè)置拖動(dòng)過(guò)程中, 鼠標(biāo)的樣式及相對(duì)空間自身的位置.
delay, distance: 設(shè)置拖動(dòng)的延遲, delay設(shè)置延遲時(shí)間, distance設(shè)置延遲距離, 目的是防止誤點(diǎn)擊帶來(lái)的不期望拖動(dòng).
grid: 設(shè)置拖動(dòng)過(guò)程移動(dòng)的單位(以小格的方式移動(dòng))
helper: 設(shè)置拖動(dòng)過(guò)程中, 跟隨鼠標(biāo)移動(dòng)的組件.
iframeFix: 解決拖動(dòng)過(guò)程中與iframe層疊后的事件問(wèn)題.
opacity: 拖動(dòng)過(guò)程helper的不透明度.
refreshPositions: 設(shè)置后drop過(guò)程中, 鼠標(biāo)每次移動(dòng)都會(huì)計(jì)算位置.
revert, revertDuration: 設(shè)置撤銷移動(dòng)相關(guān).
scope: 設(shè)定draggable的域, 用來(lái)和droppable結(jié)合使用時(shí)確定可放入的目標(biāo).
scroll, scrollSensitivity, scrollSpeed: 設(shè)置拖動(dòng)過(guò)程中帶來(lái)的滾動(dòng)條相關(guān)問(wèn)題.
snap, snapMode, snapTolerance: 設(shè)置吸附的相關(guān)屬性.
stack, zIndex: 設(shè)置控件的層次.

最新評(píng)論