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