JQuery UI - draggable參數(shù)中文詳細(xì)說(shuō)明
相關(guān)軟件相關(guān)文章發(fā)表評(píng)論 來(lái)源:西西整理時(shí)間:2011/6/2 10:49:38字體大小:A-A+
作者:西西點(diǎn)擊:882次評(píng)論:0次標(biāo)簽: JQuery
- 類(lèi)型:編程輔助大。109KB語(yǔ)言:中文 評(píng)分:5.0
- 標(biāo)簽:
立即下載
- ·概述
- 在任何DOM元素啟用拖動(dòng)功能。通過(guò)單擊鼠標(biāo)并拖動(dòng)對(duì)象在窗口內(nèi)的任何地方移動(dòng)。
- 官方示例地址:http://jqueryui.com/demos/draggable/
-
- 所有的事件回調(diào)函數(shù)都有兩個(gè)參數(shù):event和ui,瀏覽器自有event對(duì)象,和經(jīng)過(guò)封裝的ui對(duì)象
- ui.helper - 表示被拖拽的元素的JQuery對(duì)象
- ui.position - 表示相對(duì)當(dāng)前對(duì)象,鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}
- ui.offset - 表示相對(duì)于當(dāng)前頁(yè)面,鼠標(biāo)的坐標(biāo)值對(duì)象{top,left}
-
- ·參數(shù)(參數(shù)名 : 參數(shù)類(lèi)型 : 默認(rèn)值)
- addClasses : Boolean : true
- 如果設(shè)置成false,將在加載時(shí)阻止ui-draggable樣式的加載。
- 當(dāng)有很多對(duì)象要加載draggable()插件的情況下,這將對(duì)性能有極大的優(yōu)化。
- 初始: $('.selector').draggable({ addClasses: false });
- 獲取: var addClasses = $('.selector').draggable('option', 'addClasses');
- 設(shè)置: $('.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');
- 設(shè)置:$('.selector').draggable('option', 'appendTo', 'body');
-
- axis : String : false
- 約束拖動(dòng)的動(dòng)作只能在X軸或Y軸上執(zhí)行,可選值:'x', 'y'。
- 初始:$('.selector').draggable({ axis: 'x' });
- 獲取:var axis = $('.selector').draggable('option', 'axis');
- 設(shè)置:$('.selector').draggable('option', 'axis', 'x');
-
- cancel : Selector : ':input,option'
- 防止在指定的對(duì)象上開(kāi)始拖動(dòng)。
- 初始:$('.selector').draggable({ cancel: 'button' });
- 獲取:var cancel = $('.selector').draggable('option', 'cancel');
- 設(shè)置:$('.selector').draggable('option', 'cancel', 'button');
-
- connectToSortable : Selector : false
- 允許draggable被拖拽到指定的sortables中,如果使用此選項(xiàng)helper屬性必須設(shè)置成clone才能正常工作。
- 初始:$('.selector').draggable({ connectToSortable: 'ul#myList' });
- 獲。var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
- 設(shè)置:$('.selector').draggable('option', 'connectToSortable', 'ul#myList');
-
- containment : Selector,Element,String, Array : false
- 強(qiáng)制draggable只允許在指定元素或區(qū)域的范圍內(nèi)移動(dòng),可選值:'parent', 'document', 'window', [x1, y1, x2, y2].
- 初始:$('.selector').draggable({ containment: 'parent' });
- 獲。var containment = $('.selector').draggable('option', 'containment');
- 設(shè)置:$('.selector').draggable('option', 'containment', 'parent');
-
- cursor : String : 'auto'
- 指定在做拖拽動(dòng)作時(shí),鼠標(biāo)的CSS樣式。
- 初始:$('.selector').draggable({ cursor: 'crosshair' });
- 獲。var cursor = $('.selector').draggable('option', 'cursor');
- 設(shè)置:$('.selector').draggable('option', 'cursor', 'crosshair');
-
- cursorAt : Object : false
- 當(dāng)開(kāi)始移動(dòng)時(shí),鼠標(biāo)定位在的某個(gè)位置上(最多兩個(gè)方向)。可選值:{ top, left, right, bottom }.
- 初始:$('.selector').draggable({ cursorAt: { left: 5 } });
- 獲。var cursorAt = $('.selector').draggable('option', 'cursorAt');
- 設(shè)置:$('.selector').draggable('option', 'cursorAt', { left: 5 });
-
- delay : Integer : 0
- 當(dāng)鼠標(biāo)點(diǎn)下后,延遲指定時(shí)間后才開(kāi)始激活拖拽動(dòng)作(單位:毫秒)。此選項(xiàng)可以用來(lái)防止不想要的拖累元素時(shí)的誤點(diǎn)擊。
- 初始:$('.selector').draggable({ delay: 500 });
- 獲取:var delay = $('.selector').draggable('option', 'delay');
- 設(shè)置:$('.selector').draggable('option', 'delay', 500);
-
- distance : Integer : 1
- 當(dāng)鼠標(biāo)點(diǎn)下后,只有移動(dòng)指定像素后才開(kāi)始激活拖拽動(dòng)作。
- 初始:$('.selector').draggable({ distance: 30 });
- 獲。var distance = $('.selector').draggable('option', 'distance');
- 設(shè)置:$('.selector').draggable('option', 'distance', 30);
-
- grid : Array : false
- 拖拽元素時(shí),只能以指定大小的方格進(jìn)行拖動(dòng)?蛇x值:[x,y]
- 初始:$('.selector').draggable({ grid: [50, 20] });
- 獲。var grid = $('.selector').draggable('option', 'grid');
- 設(shè)置:$('.selector').draggable('option', 'grid', [50, 20]);
-
- handle : Element, Selector : false
- 限制只能在拖拽元素內(nèi)的指定元素開(kāi)始拖拽。
- 初始:$('.selector').draggable({ handle: 'h2' });
- 獲取:var handle = $('.selector').draggable('option', 'handle');
- 設(shè)置:$('.selector').draggable('option', 'handle', 'h2');
-
- helper : String, Function : 'original'
- 拖拽元素時(shí)的顯示方式。(如果是函數(shù),必須返回值是一個(gè)DOM元素)可選值:'original', 'clone', Function
- 初始:$('.selector').draggable({ helper: 'clone' });
- 獲。var helper = $('.selector').draggable('option', 'helper');
- 設(shè)置:$('.selector').draggable('option', 'helper', 'clone');
-
- iframeFix : Boolean, Selector : false
- 可防止當(dāng)mouseover事件觸發(fā)拖拽動(dòng)作時(shí),移動(dòng)過(guò)iframes并捕獲到它(內(nèi)部?jī)?nèi)容),如果設(shè)置成true,則屏蔽層會(huì)覆蓋頁(yè)面的iframe。如果設(shè)置成對(duì)應(yīng)的選擇器,則屏蔽層會(huì)覆蓋相匹配的iframe。
- 初始:$('.selector').draggable({ iframeFix: true });
- 獲。var iframeFix = $('.selector').draggable('option', 'iframeFix');
- 設(shè)置:$('.selector').draggable('option', 'iframeFix', true);
-
- opacity : Float : false
- 當(dāng)元素開(kāi)始拖拽時(shí),改變?cè)氐耐该鞫取?
- 初始:$('.selector').draggable({ opacity: 0.35 });
- 獲取:var opacity = $('.selector').draggable('option', 'opacity');
- 設(shè)置:$('.selector').draggable('option', 'opacity', 0.35);
-
- refreshPositions : Boolean : false
- 如果設(shè)置成true,所有移動(dòng)過(guò)程中的坐標(biāo)都會(huì)被記錄。(注意:此功能將影響性能)
- 初始:$('.selector').draggable({ refreshPositions: true });
- 獲。var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
- 設(shè)置:$('.selector').draggable('option', 'refreshPositions', true);
-
- revert : Boolean, String : false
- 當(dāng)元素拖拽結(jié)束后,元素回到原來(lái)的位置。
- 初始:$('.selector').draggable({ revert: true });
- 獲。var revert = $('.selector').draggable('option', 'revert');
- 設(shè)置:$('.selector').draggable('option', 'revert', true);
-
- revertDuration : Integer : 500
- 當(dāng)元素拖拽結(jié)束后,元素回到原來(lái)的位置的時(shí)間。(單位:毫秒)
- 初始:$('.selector').draggable({ revertDuration: 1000 });
- 獲。var revertDuration = $('.selector').draggable('option', 'revertDuration');
- 設(shè)置:$('.selector').draggable('option', 'revertDuration', 1000);
-
- scope : String : 'default'
- 設(shè)置元素只允許拖拽到具有相同scope值的元素。
- 初始:$('.selector').draggable({ scope: 'tasks' });
- 獲取:var scope = $('.selector').draggable('option', 'scope');
- 設(shè)置:$('.selector').draggable('option', 'scope', 'tasks');
-
- scroll : Boolean : true
- 如果設(shè)置為true,元素拖拽至邊緣時(shí),父容器將自動(dòng)滾動(dòng)。
- 初始:$('.selector').draggable({ scroll: false });
- 獲。var scroll = $('.selector').draggable('option', 'scroll');
- 設(shè)置:$('.selector').draggable('option', 'scroll', false);
-
- scrollSensitivity : Integer : 20
- 當(dāng)元素拖拽至邊緣時(shí),父窗口一次滾動(dòng)的像素。
- 初始:$('.selector').draggable({ scrollSensitivity: 40 });
- 獲。var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
- 設(shè)置:$('.selector').draggable('option', 'scrollSensitivity', 40);
-
- scrollSpeed : Integer : 20
- 當(dāng)元素拖拽至邊緣時(shí),父窗口滾動(dòng)的速度。
- 初始:$('.selector').draggable({ scrollSpeed: 40 });
- 獲取:var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
- 設(shè)置:$('.selector').draggable('option', 'scrollSpeed', 40);
-
- snap : Boolean, Selector : false
- 當(dāng)設(shè)置為true或元素標(biāo)簽時(shí),元素拖動(dòng)到其它元素的邊緣時(shí),會(huì)自動(dòng)吸附其它元素。
- 初始:$('.selector').draggable({ snap: 'span' });
- 獲。var snap = $('.selector').draggable('option', 'snap');
- 設(shè)置:$('.selector').draggable('option', 'snap', 'span');
-
- snapMode : String : 'both'
- 確定拖拽的元素吸附的模式?蛇x值:'inner', 'outer', 'both'
- 初始:$('.selector').draggable({ snapMode: 'outer' });
- 獲。var snapMode = $('.selector').draggable('option', 'snapMode');
- 設(shè)置:$('.selector').draggable('option', 'snapMode', 'outer');
-
- snapTolerance : Integer : 20
- 確定拖拽的元素移動(dòng)至其它元素多少像素的距離時(shí),發(fā)生吸附的動(dòng)作。
- 初始:$('.selector').draggable({ snapTolerance: 40 });
- 獲。var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
- 設(shè)置:$('.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');
- 設(shè)置:$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
-
- zIndex : Integer : false
- 控制當(dāng)拖拽元素時(shí),改變?cè)氐膠-index值。
- 初始:$('.selector').draggable({ zIndex: 2700 });
- 獲。var zIndex = $('.selector').draggable('option', 'zIndex');
- 設(shè)置:$('.selector').draggable('option', 'zIndex', 2700);
-
-
- ·事件
- start
- 當(dāng)鼠標(biāo)開(kāi)始拖拽時(shí),觸發(fā)此事件。
- 初始:$('.selector').draggable({ start: function(event, ui){...} });
- 綁定:$('.selector').bind('dragstart', function(event, ui){...});
-
- drag
- 當(dāng)鼠標(biāo)拖拽移動(dòng)時(shí),觸發(fā)此事件。
- 初始:$('.selector').draggable({ drag: function(event, ui){...} });
- 綁定:$('.selector').bind('drag', function(event, ui){...});
-
- stop
- 當(dāng)鼠標(biāo)松開(kāi)時(shí),觸發(fā)此事件。
- 初始:$('.selector').draggable({ stop: function(event, ui){...} });
- 綁定:$('.selector').bind('dragstop', function(event, ui){...});
-
-
- ·方法
- destory
- 從元素中移除拖拽功能。
- 用法:.draggable( 'destroy' )
-
- disable
- 禁用元素的拖拽功能。
- 用法:.draggable( 'disable' )
-
- enable
- 啟用元素的拖拽功能。
- 用法:.draggable( 'enable' )
-
- option
- 獲取或設(shè)置元素的參數(shù)。
- 用法:.draggable( 'option' , optionName , [value] )