jquery.ui.draggable中文文檔jquery 自由拖拽類~study~

1. JQuery UI Draggable插件用來使選中的元素能夠經過鼠標拖動.  
2. Draggable的元素受影響css: ui-draggable, 拖動過程當中的css: ui-draggable-dragging.  
3. 若是須要的不只僅是拖, 而是一個完整的拖放功能, 請參閱JQuery UI 的Droppable插件, 該插件提供了一個draggable放的目標.  
4. 全部的回調函數(start, stop, drag等事件)接受兩個參數:   
5. event: 瀏覽器原生的事件  
6. ui: 一個JQuery的ui對象, 其中有如下主要屬性  
7.    ui.helper: 正在拖動的元素的JQuery包裝對象, ui.helper.context能夠獲取到原生的DOM元素.  
8.    ui.position: ui.helper(也 就是咱們要拖動的元素)相對於父元素(包含本身的元素, 若是是頂層, 對應body)的偏移, 值是一個對象{top, left}----也就是能夠 用ui.position.top獲取到該元素與父元素的top當前偏移  
9.    ui.offset: 與ui.position贊成, 這裏表示的是和瀏覽器內容區域左上邊界的偏移(注意, 是內容區域, 而不是html的body區域.   html的body在默認狀況下, 各類瀏覽器中都會相對offset有偏移的.)  
10. [選項]  
11. addClasses:   
12. [類型]Boolean(布爾值)  
13. [默認值]true  
14. [產生影響]  
15.    用 來設置是否給draggable元素經過ui-draggable樣式才裝飾它. 主要爲了在經過.draggable()初始化不少(成百個)元素的時 候優化性能考慮, 可是, 這個選項的設置, 不會影響ui-draggable-dragging樣式改變拖動過程樣式.  
16.    true表示ui-draggable樣式被添加到該元素.  
17.    false表示ui-draggable樣式不被添加到該元素.  
18. [代碼示例]draggable其餘選項的初始化, 獲取屬性值, 設置屬性值部分除有特殊功能, 再也不贅述, 僅粘貼代碼.  
19.    [初始化]  
20.    $('.selector').draggable({ addClasses: false });  
21.    將.selector選擇器選中的元素渲染成爲一個可拖動控件, 不爲其添加ui-draggable樣式  
22.    [獲取屬性值]  
23.    var addClasses = $('#draggable').draggable('option', 'addClasses');  
24.    獲取.selector選擇器選中的可拖動控件的addClasses選項的值.  
25.    [設置屬性值]  
26.    $('.selector').draggable('option', 'addClasses', false);  
27.    將.selector選擇器選中的可拖動控件的addClasses選項值設置爲false.  
28. appendTo:   
29. [類型]Element, Selector(HTML元素對象或選擇器)  
30. [默認值]'parent' 父元素  
31. [產生影響]  
32.    用來指定控件在拖動過程當中ui.helper的容器, 默認狀況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.  
33. [代碼示例]  
34.    [初始化]  
35.    $('.selector').draggable({ appendTo: 'body' });  
36.    [獲取屬性值]  
37.    //getter  
38.    var appendTo = $('.selector').draggable('option', 'appendTo');  
39.    [設置屬性值]  
40.    //setter  
41.    $('.selector').draggable('option', 'appendTo', 'body');.  
42. axis:   
43. [類型]String, Boolean(可取的值有'x', 'y', false)  
44.    'x': 只能水平拖動  
45.    'y': 只能垂直拖動  
46.    false: 既能夠水平, 也能夠垂直拖動.  
47. [默認值]false, 不限制拖動的方向  
48. [產生影響]  
49.    約束拖動過程當中的取向.  
50. [代碼示例]  
51.    [初始化]  
52.    $('.selector').draggable({ axis: 'x' });  
53.    [獲取屬性值]  
54.    var axis = $('.selector').draggable('option', 'axis');  
55.    [設置屬性值]  
56.    $('.selector').draggable('option', 'axis', 'x');  
57. cancel:   
58. [類型]選擇器  
59. [默認值]':input, option'  
60. [產生影響]  
61.    經過選擇器指定這類元素不能被渲染成draggable控件.  
62. [代碼示例]  
63.    [初始化]  
64.    $('.selector').draggable({ cancel: 'button' });  
65.    [獲取屬性值]  
66.    var cancel = $('.selector').draggable('option', 'cancel');  
67.    [設置屬性值]  
68.    $('.selector').draggable('option', 'cancel', 'button');  
69. connectToSortable: 此選項須要和sortable聯合工做, 再議.  
70. [類型]選擇器  
71. [默認值]':input, option'  
72. [產生影響]  
73.    經過選擇器指定這類元素不能被渲染成draggable控件.  
74. [代碼示例]  
75.    [初始化]  
76.    $('.selector').draggable({ cancel: 'button' });  
77.    [獲取屬性值]  
78.    var cancel = $('.selector').draggable('option', 'cancel');  
79.    [設置屬性值]  
80.    $('.selector').draggable('option', 'cancel', 'button');  
81. containment:   
82. [類型]選擇器, 元素, 字符串, 數組.  
83.    選擇器: 只能在選擇器約束的元素內拖動  
84.    元素: 只能在給定的元素內拖動  
85.    字符串:   
86.     parent: 只能在父容器內拖動  
87.     document: 在當前html文檔的document下可拖動, 超出瀏覽器窗口範圍時, 自動出現滾動條  
88.     widow: 只能在當前瀏覽器窗口的內容區域拖動, 拖動超出當前窗口範圍, 不會致使出現滾動條...  
89.    數組: [x1, y1, x2, y2]以[開始水平座標, 開始垂直座標, 結束水平座標, 結束垂直座標]的方式劃定一個區域, 只能在此區域內拖動. 這種方式指定時, 值是相對當前瀏覽器窗口內容區域左上角的偏移值.  
90.    false: 不限制拖動的活動範圍  
91. [默認值]false  
92. [產生影響]  
93.    影響指定可拖動控件的活動區域.  
94. [代碼示例]  
95.    [初始化]  
96.    $('.selector').draggable({ containment: 'parent' });  
97.    [獲取屬性值]  
98.    var containment = $('.selector').draggable('option', 'containment');  
99.    [設置屬性值]  
100.    $('.selector').draggable('option', 'containment', 'parent');  
101. cursor:   
102. [類型]字符串.  
103. [默認值]'auto'  
104. [產生影響]  
105.    影 響指定可拖動控件在拖動過程當中的鼠標樣式, 該樣式設定以後, 須要控件的原始元素支持指定的cursor樣式, 若是指定的值原始元素不支持, 則使用 原始元素默認的cursor樣式. 比 如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 因爲button不 支持crosshair這個鼠標樣式, 因此, 會以默認形式顯示.  
106. [代碼示例]  
107.    [初始化]  
108.    $('.selector').draggable({ cursor: 'crosshair' });  
109.    [獲取屬性值]  
110.    var cursor = $('.selector').draggable('option', 'cursor');  
111.    [設置屬性值]  
112.    $('.selector').draggable('option', 'cursor', 'crosshair');  
113. cursorAt:   
114. [類型]對象  
115.    經過設置對象的top, left, right, bottom的屬性值中的一個或兩個來肯定位置.  
116. [默認值]false  
117. [產生影響]  
118.    在 拖動控件的過程當中, 鼠標在控件上顯示的位置, 值爲false(默認)時, 從哪裏點擊開始拖動, 鼠標位置就在哪裏, 若是設置了, 就會在一個相對 控件自身左上角偏移位置處, 比 如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那麼 拖動過程當中, 鼠標就會在自身的左上角向下向右各偏移8像素處.  
119. [代碼示例]  
120.    [初始化]  
121.    $('.selector').draggable({ cursor: 'crosshair' });  
122.    [獲取屬性值]  
123.    var cursor = $('.selector').draggable('option', 'cursor');  
124.    [設置屬性值]  
125.    $('.selector').draggable('option', 'cursor', 'crosshair');  
126. delay:   
127. [類型]整數, 單位是毫秒  
128. [默認值]0  
129. [產生影響]  
130.    可 拖動控件從鼠標左鍵按下開始, 到拖動效果產生的延時. 該選項能夠被用來阻止一些不指望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵 按下, 到delay指定的時間, 若是鼠標左鍵尚未鬆開, 那麼就認爲此次拖動有效, 不然, 認爲此次拖動無效.  
131. [代碼示例]  
132.    [初始化]  
133.    $('.selector').draggable({ delay: 500 });  
134.    [獲取屬性值]  
135.    var delay = $('.selector').draggable('option', 'delay');  
136.    [設置屬性值]  
137.    $('.selector').draggable('option', 'delay', 500);  
138. distance:   
139. [類型]整數, 單位是像素  
140. [默認值]1  
141. [產生影響]  
142.    可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的時鼠標必須產生的位移. 該選項能夠被用來阻止一些不指望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵按下, 只有當鼠標產生的位移達到distance指定的值時, 才認爲是有效的拖動.  
143. [代碼示例]  
144.    [初始化]  
145.    $('.selector').draggable({ distance: 30 });  
146.    [獲取屬性值]  
147.    var distance = $('.selector').draggable('option', 'distance');  
148.    [設置屬性值]  
149.    $('.selector').draggable('option', 'distance', 30);  
150. grid:   
151. [類型]數組[x, y], x表明水平大小, y表明垂直大小, 單位是像素  
152. [默認值]false  
153. [產生影響]  
154.    可拖動控件拖動時採用grid的方式拖動, 也就是說拖動過程當中的單位是guid選項指定的數組描述的格子那麼大.  
155. [代碼示例]  
156.    [初始化]  
157.    $('.selector').draggable({ grid: [50, 20] });  
158.    [獲取屬性值]  
159.    var grid = $('.selector').draggable('option', 'grid');  
160.    [設置屬性值]  
161.    $('.selector').draggable('option', 'grid', [50, 20]);  
162. handle:   
163. [類型]選擇器或元素  
164. [默認值]false  
165. [產生影響]  
166.    指 定觸發拖動的元素. 用法: 將一個id=window的div設置爲可拖動控件, 設置它的handle是該div中的一個id=title的 span, 那麼, 就只有在id=title的span上點擊拖動纔是有效的.   注意: 該元素必定要是可拖動控件的子元素.  
167. [代碼示例]  
168.    [初始化]  
169.    $('.selector').draggable({ handle: 'h2' });  
170.    [獲取屬性值]  
171.    var handle = $('.selector').draggable('option', 'handle');  
172.    [設置屬性值]  
173.    $('.selector').draggable('option', 'handle', 'h2');  
174. helper:   
175. [類型]字符串或函數  
176.    字符串取值:  
177.     'original': 可拖動控件自己移動  
178.     'clone': 將可拖動控件自身克隆一個移動, 自身在原始位置不變  
179.    函數則必須返回一個DOM元素: 以函數返回的DOM元素移動展示拖動的過程.  
180. [默認值]'original'  
181. [產生影響]  
182.    拖動過程當中幫助用戶知道當前拖動位置的元素.  
183. [代碼示例]  
184.    [初始化]  
185.    $('.selector').draggable({ helper: 'clone' });  
186.    [獲取屬性值]  
187.    var helper = $('.selector').draggable('option', 'helper');  
188.    [設置屬性值]  
189.    $('.selector').draggable('option', 'helper', 'clone');  
190. iframeFix:   
191. [類型]布爾值或選擇器, 選擇器的選擇結果須要是iframe元素  
192. [默認值]false  
193. [產生影響]  
194.    阻止拖動過程當中因爲鼠標指針在iframe區域移動, iframe對鼠標移動事件的默認響應.  
195.    若是設置爲true, 將會阻止拖動過程當中當前頁面上全部的iframe的mousemove事件, 若是設置一個選擇器, 將會阻止指定的iframe的mousemove事件.  
196. [代碼示例]  
197.    [初始化]  
198.    $('.selector').draggable({ iframeFix: true });  
199.    [獲取屬性值]  
200.    var iframeFix = $('.selector').draggable('option', 'iframeFix');  
201.    [設置屬性值]  
202.    $('.selector').draggable('option', 'iframeFix', true);  
203. opacity:   
204. [類型]浮點數值  
205. [默認值]false  
206. [產生影響]  
207.    拖動過程當中helper(拖動時跟隨鼠標移動的控件)的不透明度.  
208. [代碼示例]  
209.    [初始化]  
210.    $('.selector').draggable({ opacity: 0.35 });  
211.    [獲取屬性值]  
212.    var opacity = $('.selector').draggable('option', 'opacity');  
213.    [設置屬性值]  
214.    $('.selector').draggable('option', 'opacity', 0.35);  
215. refreshPositions:   
216. [類型]Boolean  
217. [默認值]false  
218. [產生影響]  
219.    若是設置爲true, 全部的droppable位置會在每次mousemove事件中進行計算.   
220.    注意: 該選項主要用於解決高級動態頁面展示問題. 慎用.  
221. [代碼示例]  
222.    [初始化]  
223.    $('.selector').draggable({ refreshPositions: true });  
224.    [獲取屬性值]  
225.    var refreshPositions = $('.selector').draggable('option', 'refreshPositions');  
226.    [設置屬性值]  
227.    $('.selector').draggable('option', 'refreshPositions', true);  
228. revert:   
229. [類型]Boolean, 字符串  
230. [默認值]false  
231. [產生影響]  
232.    影響一次拖動以後是否迴歸到原始位置.  
233.    true: 每次拖動中止以後, 元素自動回到原始位置  
234.    'invalid': 除非是一個droppable而且被drop(放)成功了, 纔不將元素返回到原始位置.  
235.    'valid': 除invalid以外的其餘狀況.  
236. [代碼示例]  
237.    [初始化]  
238.    $('.selector').draggable({ revert: true });  
239.    [獲取屬性值]  
240.    var revert = $('.selector').draggable('option', 'revert');  
241.    [設置屬性值]  
242.    $('.selector').draggable('option', 'revert', true);  
243. revertDuration:   
244. [類型]整數  
245. [默認值]500  
246. [產生影響]  
247.    revert(迴歸到原始位置)整個過程須要的時間, 單位是毫秒. 若是設置revert選項設置爲false, 則忽略此屬性.  
248. [代碼示例]  
249.    [初始化]  
250.    $('.selector').draggable({ revertDuration: 1000 });  
251.    [獲取屬性值]  
252.    var revertDuration = $('.selector').draggable('option', 'revertDuration');  
253.    [設置屬性值]  
254.    $('.selector').draggable('option', 'revertDuration', 1000);  
255. scope:   
256. [類型]字符串  
257. [默認值]'default'  
258. [產生影響]  
259.    該 選項描述一個範圍, 和droppable的同名選項結合使用, droppable的accept選項用來設置能夠接受的draggable控件, 同 時, 可接受的drggable控件受scope選項約束, 必須是同一個scope中的draggable和droppable才能夠互相拖放.  
260.    例如:  
261.    $('#draggable_a').draggable({scope: 'a'});  
262.    $('#draggable_b').draggable({scope: 'b'});  
263.    $('#droppable_a').droppable({scope: 'a'});  
264.    $('#droppable_b').droppable({scope: 'b'});  
265.    droppable 控件的accept選項默認是'*', 看起來數draggable_a, draggable_b能夠自由的放入到droppable_a和 droppable_b中, 可是, 因爲scope的約束, draggable_a只能放入到droppable_a, draggable_b只能 髮乳到droppable_b中.  
266.    注意: 這個選項就和變量的名稱空間的意義相似. 默認值是'default', 說明若是不指定, 你們都仍是有scope的, 名字是default而已.  
267. [代碼示例]  
268.    [初始化]  
269.    $('.selector').draggable({ scope: 'tasks' });  
270.    [獲取屬性值]  
271.    var scope = $('.selector').draggable('option', 'scope');  
272.    [設置屬性值]  
273.    $('.selector').draggable('option', 'scope', 'tasks');  
274. scroll:   
275. [類型]Boolean  
276. [默認值]true  
277. [產生影響]  
278.    若是設置爲true, 在拖動過程當中超出可拖動控件容器的時候, 容器自動增長滾動條  
279. [代碼示例]  
280.    [初始化]  
281.    $('.selector').draggable({ scroll: false });  
282.    [獲取屬性值]  
283.    var scope = $('.selector').draggable('option', 'scope');  
284.    [設置屬性值]  
285.    $('.selector').draggable('option', 'scroll', false);  
286. scrollSensitivity:   
287. [類型]整數值  
288. [默認值]20  
289. [產生影響]  
290.    滾動條的敏感度.  
291.    下面所屬的鼠標指針是指在draggable控件移動過程當中, 鼠標所處位置.  
292.    鼠標指針和與draggable控件所在容器的邊距離爲多少的時候, 滾動條開始滾動.  
293. [代碼示例]  
294.    [初始化]  
295.    $('.selector').draggable({ scrollSensitivity: 40 });  
296.    [獲取屬性值]  
297.    var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');  
298.    [設置屬性值]  
299.    $('.selector').draggable('option', 'scrollSensitivity', 40);  
300. scrollSpeed:   
301. [類型]整數值  
302. [默認值]20  
303. [產生影響]  
304.    因爲scrollSensitivity致使的滾動發生時, 滾動條一次滾動多少像素值.  
305. [代碼示例]  
306.    [初始化]  
307.    $('.selector').draggable({ scrollSpeed: 40 });  
308.    [獲取屬性值]  
309.    var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');  
310.    [設置屬性值]  
311.    $('.selector').draggable('option', 'scrollSpeed', 40);  
312. snap:   
313. [類型]Boolean, 選擇器  
314. [默認值]false  
315. [產生影響]  
316.    吸附功能, 設置爲true等價與設置選擇器.ui-draggable, 具體效果是在選擇器指定的全部元素上, 當前的draggable控件均可以實現吸附功能, 吸附就是拖動過程當中, 靠近可是尚未捱上目標組件是, 自動的將正在拖動的組件吸過去.  
317. [代碼示例]  
318.    [初始化]  
319.    $('.selector').draggable({ snap: true });  
320.    [獲取屬性值]  
321.    var snap = $('.selector').draggable('option', 'snap');  
322.    [設置屬性值]  
323.    $('.selector').draggable('option', 'snap', true);  
324. snapMode:   
325. [類型]字符串, 可選值以下  
326.    'inner': 在指定的元素內部能夠吸附  
327.    'outer': 在指定元素外部能夠吸附  
328.    'both': 裏面外面均可以吸附.  
329. [默認值]'both'  
330. [產生影響]  
331.    設定吸附時候的模式.  
332. [代碼示例]  
333.    [初始化]  
334.    $('.selector').draggable({ snapMode: 'outer' });  
335.    [獲取屬性值]  
336.    var snapMode = $('.selector').draggable('option', 'snapMode');  
337.    [設置屬性值]  
338.    $('.selector').draggable('option', 'snapMode', 'outer');  
339. snapTolerance:   
340. [類型]整數  
341. [默認值]20  
342. [產生影響]  
343.    設定離目標對象的邊多少像素的時候, 進行吸附.  
344. [代碼示例]  
345.    [初始化]  
346.    $('.selector').draggable({ snap: true });  
347.    [獲取屬性值]  
348.    var snap = $('.selector').draggable('option', 'snap');  
349.    [設置屬性值]  
350.    $('.selector').draggable('option', 'snap', true);  
351. stack:   
352. [類型]對象{group: '.selector', min: 50}  
353. [默認值]false  
354. [產生影響]  
355.    一次初始化一組draggable控件的時候, 將其中的一些draggable控件以給定選擇器選擇, 做爲一組, 這時, 這一組draggable控件就能夠實現當前被拖動的始終在最前效果, min用來指定這一組的z-index值的最小值.  
356. [代碼示例]  
357.    [初始化]  
358.    $('.selector').draggable({ stack: { group: 'products', min: 50 } });  
359.    [獲取屬性值]  
360.    var stack = $('.selector').draggable('option', 'stack');  
361.    [設置屬性值]  
362.    $('.selector').draggable('option', 'stack', { group: 'products', min: 50 });  
363. zIndex:   
364. [類型]整數  
365. [默認值]false  
366. [產生影響]  
367.    拖動時的helper(跟隨鼠標移動的控件)的z-index值. z-index就是css中的層疊層數, 數值越大, 越在上層.  
368. [代碼示例]  
369.    [初始化]  
370.    $('.selector').draggable({ zIndex: 2700 });  
371.    [獲取屬性值]  
372.    var zIndex = $('.selector').draggable('option', 'zIndex');  
373.    [設置屬性值]  
374.    $('.selector').draggable('option', 'zIndex', 2700);  
375. [事件]  
376. start: 拖動開始, 指鼠標按下, 開始移動.  
377. [類型]dragstart  
378. [回調函數接受的參數]  
379.    event: 原生的瀏覽器事件.  
380.    ui: JQuery的ui對象  
381.    this: 當前拖動的控件DOM對象  
382. drag: 拖動過程當中鼠標移動.  
383. [類型]drag  
384. [回調函數接受的參數]  
385.    event: 原生的瀏覽器事件.  
386.    ui: JQuery的ui對象  
387.    this: 當前拖動的控件DOM對象  
388. stop: 拖動結束.  
389. [類型]dragstop  
390. [回調函數接受的參數]  
391.    event: 原生的瀏覽器事件.  
392.    ui: JQuery的ui對象  
393.    this: 當前拖動的控件DOM對象  
394. [代碼示例]  
395. 初始化時設置事件.  
396. $('.selector').draggable({  
397.      start: function(event, ui) { alert(this); },   
398.      drag: function(event, ui) { alert(this); },   
399.      stop: function(event, ui) { alert(this); }  
400. });  
401. 動態的綁定事件. 動態綁定時候, 使用的事件名就是事件的類型.  
402. $(".selector").bind('dragstart', function(event, ui) {  
403.    alert(this);  
404. });  
405. $(".selector").bind('drag', function(event, ui) {  
406.    alert(this);  
407. });  
408. $(".selector").bind('dragstop', function(event, ui) {  
409.    alert(this);  
410. });  
411. [方法]  
412. destroy: 徹底移除一個可拖動控件, 使其回退到該元素被初始化成可拖動控件以前的狀態.  
413. [代碼示例]  
414.    $(".selector").progressbar('destroy');  
415.    將以前初始化的.selector指定的可拖動控件銷燬, 使其返回初始化以前的狀態.  
416. disable: 將可拖動控件樣式改變成爲失效, 與enable對應.  
417. enable: 將可拖動控件樣式改變爲容許, 與disable對應.  
418. option: 獲取或設置可拖動控件的選項, 第二個參數是選項名, 第三個參數是值. 若是不指定值, 就是獲取, 指定值, 就是設置.  
419.   
420. [總結]  
421. addClasses: 用來設置是否添加ui-draggable樣式.  
422. appendTo: 設置追加到什麼地方  
423. axis: 設置拖動的方向  
424. cancel, handle: 設置控制整個控件拖動動做的區域, cancel指定區域不能拖動, handle指定區域控制控件拖動.  
425. connectToSortable: 須要和sortable集成.  
426. containment: 設置控件可拖動範圍  
427. cursor, cursorAt: 設置拖動過程當中, 鼠標的樣式及相對空間自身的位置.  
428. delay, distance: 設置拖動的延遲, delay設置延遲時間, distance設置延遲距離, 目的是防止誤點擊帶來的不指望拖動.  
429. grid: 設置拖動過程移動的單位(以小格的方式移動)  
430. helper: 設置拖動過程當中, 跟隨鼠標移動的組件.  
431. iframeFix: 解決拖動過程當中與iframe層疊後的事件問題.  
432. opacity: 拖動過程helper的不透明度.  
433. refreshPositions: 設置後drop過程當中, 鼠標每次移動都會計算位置.  
434. revert, revertDuration: 設置撤銷移動相關.  
435. scope: 設定draggable的域, 用來和droppable結合使用時肯定可放入的目標.  
436. scroll, scrollSensitivity, scrollSpeed: 設置拖動過程當中帶來的滾動條相關問題.  
437. snap, snapMode, snapTolerance: 設置吸附的相關屬性.  
438. stack, zIndex: 設置控件的層次.