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