生活随笔
收集整理的這篇文章主要介紹了
jquery.ui.draggable中文文档jquery 自由拖拽类~study~
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??
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è)置控件的層次.
轉(zhuǎn)載于:https://my.oschina.net/diydit/blog/152142
總結(jié)
以上是生活随笔為你收集整理的jquery.ui.draggable中文文档jquery 自由拖拽类~study~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
