JQuery UI – draggable

·概述<br />在任何DOM元素啟用拖動功能。通過單擊滑鼠並拖動對象在視窗內的任何地方移動。<br />官方樣本地址：http://jqueryui.com/demos/draggable/</p><p>所有的事件回呼函數都有兩個參數：event和ui，瀏覽器自有event對象，和經過封裝的ui對象<br />ui.helper - 表示被拖拽的元素的JQuery對象<br />ui.position - 表示相對當前對象，滑鼠的座標值對象{top,left}<br />ui.offset - 表示相對於當前頁面，滑鼠的座標值對象{top,left}</p><p>·參數（參數名 : 參數類型 : 預設值）<br />addClasses : Boolean : true<br /> 如果設定成false，將在載入時阻止ui-draggable樣式的載入。<br /> 當有很多個物件要載入draggable()外掛程式的情況下，這將對效能有極大的最佳化。<br /> 初始: $('.selector').draggable({ addClasses: false });<br /> 擷取: var addClasses = $('.selector').draggable('option', 'addClasses');<br /> 設定: $('.selector').draggable('option', 'addClasses', false);</p><p>appendTo : Element,Selector : 'parent'<br /> 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.<br /> 初始：$('.selector').draggable({ appendTo: 'body' });<br /> 擷取：var appendTo = $('.selector').draggable('option', 'appendTo');<br /> 設定：$('.selector').draggable('option', 'appendTo', 'body');</p><p>axis : String : false<br /> 約束拖動的動作只能在X軸或Y軸上執行，可選值：'x', 'y'。<br /> 初始：$('.selector').draggable({ axis: 'x' });<br /> 擷取：var axis = $('.selector').draggable('option', 'axis');<br /> 設定：$('.selector').draggable('option', 'axis', 'x');</p><p>cancel : Selector : ':input,option'<br /> 防止在指定的對象上開始拖動。<br /> 初始：$('.selector').draggable({ cancel: 'button' });<br /> 擷取：var cancel = $('.selector').draggable('option', 'cancel');<br /> 設定：$('.selector').draggable('option', 'cancel', 'button');</p><p>connectToSortable : Selector : false<br /> 允許draggable被拖拽到指定的sortables中，如果使用此選項helper屬性必須設定成clone才能正常工作。<br /> 初始：$('.selector').draggable({ connectToSortable: 'ul#myList' });<br /> 擷取：var connectToSortable = $('.selector').draggable('option', 'connectToSortable');<br /> 設定：$('.selector').draggable('option', 'connectToSortable', 'ul#myList');</p><p>containment : Selector,Element,String, Array : false<br /> 強制draggable只允許在指定元素或地區的範圍內移動，可選值：'parent', 'document', 'window', [x1, y1, x2, y2].<br /> 初始：$('.selector').draggable({ containment: 'parent' });<br /> 擷取：var containment = $('.selector').draggable('option', 'containment');<br /> 設定：$('.selector').draggable('option', 'containment', 'parent');</p><p>cursor : String : 'auto'<br /> 指定在做拖拽動作時，滑鼠的CSS樣式。<br /> 初始：$('.selector').draggable({ cursor: 'crosshair' });<br /> 擷取：var cursor = $('.selector').draggable('option', 'cursor');<br /> 設定：$('.selector').draggable('option', 'cursor', 'crosshair');</p><p>cursorAt : Object : false<br /> 當開始移動時，滑鼠定位在的某個位置上（最多兩個方向）。可選值：{ top, left, right, bottom }.<br /> 初始：$('.selector').draggable({ cursorAt: { left: 5 } });<br /> 擷取：var cursorAt = $('.selector').draggable('option', 'cursorAt');<br /> 設定：$('.selector').draggable('option', 'cursorAt', { left: 5 });</p><p>delay : Integer : 0<br /> 當滑鼠點下後，延遲指定時間後才開始啟用拖拽動作（單位：毫秒）。此選項可以用來防止不想要的拖累元素時的誤點擊。<br /> 初始：$('.selector').draggable({ delay: 500 });<br /> 擷取：var delay = $('.selector').draggable('option', 'delay');<br /> 設定：$('.selector').draggable('option', 'delay', 500);</p><p>distance : Integer : 1<br /> 當滑鼠點下後，只有移動指定像素後才開始啟用拖拽動作。<br /> 初始：$('.selector').draggable({ distance: 30 });<br /> 擷取：var distance = $('.selector').draggable('option', 'distance');<br /> 設定：$('.selector').draggable('option', 'distance', 30);</p><p>grid : Array : false<br /> 拖拽元素時，只能以指定大小的方格進行拖動。可選值：[x,y]<br /> 初始：$('.selector').draggable({ grid: [50, 20] });<br /> 擷取：var grid = $('.selector').draggable('option', 'grid');<br /> 設定：$('.selector').draggable('option', 'grid', [50, 20]);</p><p>handle : Element, Selector : false<br /> 限制只能在拖拽元素內的指定元素開始拖拽。<br /> 初始：$('.selector').draggable({ handle: 'h2' });<br /> 擷取：var handle = $('.selector').draggable('option', 'handle');<br /> 設定：$('.selector').draggable('option', 'handle', 'h2');</p><p>helper : String, Function : 'original'<br /> 拖拽元素時的顯示方式。（如果是函數，必須傳回值是一個DOM元素）可選值：'original', 'clone', Function<br /> 初始：$('.selector').draggable({ helper: 'clone' });<br /> 擷取：var helper = $('.selector').draggable('option', 'helper');<br /> 設定：$('.selector').draggable('option', 'helper', 'clone');</p><p>iframeFix : Boolean, Selector : false<br /> 可防止當mouseover事件觸發拖拽動作時，移動過iframes並捕獲到它（內部內容），如果設定成true，則屏蔽層會覆蓋頁面的iframe。如果設定成對應的選取器，則屏蔽層會覆蓋相匹配的iframe。<br /> 初始：$('.selector').draggable({ iframeFix: true });<br /> 擷取：var iframeFix = $('.selector').draggable('option', 'iframeFix');<br /> 設定：$('.selector').draggable('option', 'iframeFix', true);</p><p>opacity : Float : false<br /> 當元素開始拖拽時，改變元素的透明度。<br /> 初始：$('.selector').draggable({ opacity: 0.35 });<br /> 擷取：var opacity = $('.selector').draggable('option', 'opacity');<br /> 設定：$('.selector').draggable('option', 'opacity', 0.35);</p><p>refreshPositions : Boolean : false<br /> 如果設定成true，所有移動過程中的座標都會被記錄。（注意：此功能將影響效能）<br /> 初始：$('.selector').draggable({ refreshPositions: true });<br /> 擷取：var refreshPositions = $('.selector').draggable('option', 'refreshPositions');<br /> 設定：$('.selector').draggable('option', 'refreshPositions', true);</p><p>revert : Boolean, String : false<br /> 當元素拖拽結束後，元素回到原來的位置。<br /> 初始：$('.selector').draggable({ revert: true });<br /> 擷取：var revert = $('.selector').draggable('option', 'revert');<br /> 設定：$('.selector').draggable('option', 'revert', true);</p><p>revertDuration : Integer : 500<br /> 當元素拖拽結束後，元素回到原來的位置的時間。（單位：毫秒）<br /> 初始：$('.selector').draggable({ revertDuration: 1000 });<br /> 擷取：var revertDuration = $('.selector').draggable('option', 'revertDuration');<br /> 設定：$('.selector').draggable('option', 'revertDuration', 1000);</p><p>scope : String : 'default'<br /> 設定元素只允許拖拽到具有相同scope值的元素。<br /> 初始：$('.selector').draggable({ scope: 'tasks' });<br /> 擷取：var scope = $('.selector').draggable('option', 'scope');<br /> 設定：$('.selector').draggable('option', 'scope', 'tasks');</p><p>scroll : Boolean : true<br /> 如果設定為true，元素拖拽至邊緣時，父容器將自動滾動。<br /> 初始：$('.selector').draggable({ scroll: false });<br /> 擷取：var scroll = $('.selector').draggable('option', 'scroll');<br /> 設定：$('.selector').draggable('option', 'scroll', false);</p><p>scrollSensitivity : Integer : 20<br /> 當元素拖拽至邊緣時，父視窗一次滾動的像素。<br /> 初始：$('.selector').draggable({ scrollSensitivity: 40 });<br /> 擷取：var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');<br /> 設定：$('.selector').draggable('option', 'scrollSensitivity', 40);</p><p>scrollSpeed : Integer : 20<br /> 當元素拖拽至邊緣時，父視窗滾動的速度。<br /> 初始：$('.selector').draggable({ scrollSpeed: 40 });<br /> 擷取：var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');<br /> 設定：$('.selector').draggable('option', 'scrollSpeed', 40);</p><p>snap : Boolean, Selector : false<br /> 當設定為true或元素標籤時，元素拖動到其它元素的邊緣時，會自動吸附其它元素。<br /> 初始：$('.selector').draggable({ snap: 'span' });<br /> 擷取：var snap = $('.selector').draggable('option', 'snap');<br /> 設定：$('.selector').draggable('option', 'snap', 'span');</p><p>snapMode : String : 'both'<br /> 確定拖拽的元素吸附的模式。可選值：'inner', 'outer', 'both'<br /> 初始：$('.selector').draggable({ snapMode: 'outer' });<br /> 擷取：var snapMode = $('.selector').draggable('option', 'snapMode');<br /> 設定：$('.selector').draggable('option', 'snapMode', 'outer');</p><p>snapTolerance : Integer : 20<br /> 確定拖拽的元素移動至其它元素多少像素的距離時，發生吸附的動作。<br /> 初始：$('.selector').draggable({ snapTolerance: 40 });<br /> 擷取：var snapTolerance = $('.selector').draggable('option', 'snapTolerance');<br /> 設定：$('.selector').draggable('option', 'snapTolerance', 40);</p><p>stack : Object : false<br /> 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.<br /> 初始：$('.selector').draggable({ stack: { group: 'products', min: 50 } });<br /> 擷取：var stack = $('.selector').draggable('option', 'stack');<br /> 設定：$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });</p><p>zIndex : Integer : false<br /> 控制當拖拽元素時，改變元素的z-index值。<br /> 初始：$('.selector').draggable({ zIndex: 2700 });<br /> 擷取：var zIndex = $('.selector').draggable('option', 'zIndex');<br /> 設定：$('.selector').draggable('option', 'zIndex', 2700);</p><p>·事件<br />start<br /> 當滑鼠開始拖拽時，觸發此事件。<br /> 初始：$('.selector').draggable({ start: function(event, ui){...} });<br /> 綁定：$('.selector').bind('dragstart', function(event, ui){...});</p><p>drag<br /> 當滑鼠拖拽移動時，觸發此事件。<br /> 初始：$('.selector').draggable({ drag: function(event, ui){...} });<br /> 綁定：$('.selector').bind('drag', function(event, ui){...});</p><p>stop<br /> 當滑鼠鬆開時，觸發此事件。<br /> 初始：$('.selector').draggable({ stop: function(event, ui){...} });<br /> 綁定：$('.selector').bind('dragstop', function(event, ui){...});</p><p>·方法<br />destory<br /> 從元素中移除拖拽功能。<br /> 用法：.draggable( 'destroy' )</p><p>disable<br /> 禁用元素的拖拽功能。<br /> 用法：.draggable( 'disable' )</p><p>enable<br /> 啟用元素的拖拽功能。<br /> 用法：.draggable( 'enable' )</p><p>option<br /> 擷取或設定元素的參數。<br /> 用法：.draggable( 'option' , optionName , [value] )