jquery ui（二）draggable,droppable

剛接觸的時候，分不清draggable和droppable的區別，瞎弄了一會，其實很簡單，draggable就是“拖”的功能，droppable就是“放”的功能。

一、先上一個簡單例子

1、代碼

2、截圖/

拖動 #draggable之前的截圖

把#draggable 丟到 #droppable 之后的截圖

二、具體用法

1、需要加載的JS ，jquery 需要在jquery-ui之前

2、頁面上的HTML

(1)拖動的element

(2) 如果需要指定放下到哪里，則需要寫一個接受的元素

3、主要的JS代碼

（1）初始化draggable（可拖動）

draggable()函數有許多參數和用法，詳見二、4

（2）初始化#droppable，當有東西丟下時，執行

droppable()函數有許多參數和用法(詳見二、5)

4、draggable()函數的其他參數

（1）回調函數

有start, stop, drag等事件，這些函數都接受兩個參數：event和ui。
start: 拖動開始, 指鼠標按下, 開始移動.
drag: 拖動過程中鼠標移動.
stop: 拖動結束.

（2）常見參數

addClasses: [類型]Boolean(布爾值) [默認值]true
是否給draggable元素增加 ui-draggable這個css的class
axis： [類型]String [支持] ‘x’, ‘y’, false
控制元素 只能沿 X軸|Y軸 移動
containment：[類型]選擇器, 元素, 字符串, 數組
只能在選擇器約束的元素內拖動
delay：[類型]整數, 單位是毫秒
可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的延時
還有：distance，distance，handle，helper，opacity （詳見 四、）

5、 droppable()函數的參數

（1）函數

activate：在允許的draggable對象開始拖動時觸發.
deactivate：在允許的draggable對象停止拖動時觸發.
over：在允許的draggable對象”經過”這個droppable對象時觸發
out：在允許的draggable對象離開 這個droppable對象時觸發
drop：在允許的draggable對象填充進這個droppable對象時觸發.

(2)常見參數

accept ：[類型]Selector, Function [默認值]‘*’
允許被放下來的元素.
hoverClass :[類型]String [默認值]false
一個被允許的draggable對象懸停在droppable對象上時添加的class

還有：activeClass，greedy，scope，tolerance （詳見 五、）

三、具體用法文章

1、jquery ui（一）簡介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進度條 progressbar
5、jquery ui（五）日期選擇器 datepicker

四、drappable的超級詳細參數

1、回調函數

有start, stop, drag等事件，這些函數都接受兩個參數：event和ui。
event: 瀏覽器原生的事件 ； ui: 一個JQuery的ui對象。
其中ui 有以下屬性：
a) ui.helper: 正在拖動的元素的JQuery包裝對象, ui.helper.context可以獲取到原生的DOM元素.
b) ui.position: ui.helper(也就是我們要拖動的元素)相對于父元素(包含自己的元素, 如果是頂層, 對應body)的偏移, 值是一個對象{top, left}—-也就是可以用ui.position.top獲取到該元素與父元素的top當前偏移
c) ui.offset: 與ui.position同意, 這里表示的是和瀏覽器內容區域左上邊界的偏移(注意, 是內容區域, 而不是html的body區域. html的body在默認情況下, 各種瀏覽器中都會相對offset有偏移的.)
(1) start: 拖動開始, 指鼠標按下, 開始移動.
(2) drag: 拖動過程中鼠標移動.
(3) stop: 拖動結束.
[代碼示例]
初始化時設置事件.
$(‘.selector’).draggable({
start: function(event, ui){ alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});

2、常用參數(選項)

(1)addClasses

[類型]Boolean(布爾值)
[默認值]true
[產生影響]
用來設置是否給draggable元素通過ui-draggable樣式才裝飾它. 主要為了在通過.draggable()初始化很多(成百個)元素的時候優化性能考慮, 但是, 這個選項的設置, 不會影響ui-draggable-dragging樣式改變拖動過程樣式.
true表示ui-draggable樣式被添加到該元素.
false表示ui-draggable樣式不被添加到該元素.
[代碼示例]draggable其他選項的初始化,
$(‘.selector’).draggable({ addClasses: false });
將.selector選擇器選中的元素渲染成為一個可拖動控件, 不為其添加ui-draggable樣式

(2)appendTo:

[類型]Element, Selector(HTML元素對象或選擇器)
[默認值]‘parent’ 父元素
[產生影響]
用來指定控件在拖動過程中ui.helper的容器, 默認情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.
[代碼示例]
$(‘.selector’).draggable({ appendTo: ‘body’ });

(3)axis:

[類型]String, Boolean(可取的值有’x', ‘y’, false)
‘x’: 只能水平拖動
‘y’: 只能垂直拖動
false: 既可以水平, 也可以垂直拖動.
[默認值]false, 不限制拖動的方向
[產生影響]
約束拖動過程中的取向.
[代碼示例]
$(‘.selector’).draggable({ axis: ‘x’ });

(4)containment:

[類型]選擇器, 元素, 字符串, 數組.
選擇器: 只能在選擇器約束的元素內拖動
元素: 只能在給定的元素內拖動
字符串:
parent: 只能在父容器內拖動
document: 在當前html文檔的document下可拖動, 超出瀏覽器窗口范圍時, 自動出現滾動條
widow: 只能在當前瀏覽器窗口的內容區域拖動, 拖動超出當前窗口范圍, 不會導致出現滾動條…
數組: [x1, y1, x2, y2]以[開始水平坐標, 開始垂直坐標, 結束水平坐標, 結束垂直坐標]的方式劃定一個區域, 只能在此區域內拖動. 這種方式指定時, 值是相對當前瀏覽器窗口內容區域左上角的偏移值.
false: 不限制拖動的活動范圍
[默認值]false
[產生影響]
影響指定可拖動控件的活動區域.
[代碼示例]
$(‘.selector’).draggable({ containment: ‘parent’ });
$(‘.selector’).draggable({ containment: ‘#demo-frame’ });

(5)cursor:

[類型]字符串.
[默認值]‘auto’
[產生影響]
影響指定可拖動控件在拖動過程中的鼠標樣式, 該樣式設定之后, 需要控件的原始元素支持指定的cursor樣式, 如果指定的值原始元素不支持, 則使用原始元素默認的cursor樣式.
[代碼示例]
$(‘.selector’).draggable({ cursor: ‘crosshair’ });

(6)cursorAt:

[類型]對象
通過設置對象的top, left, right, bottom的屬性值中的一個或兩個來確定位置.
[默認值]false
[產生影響]
在拖動控件的過程中, 鼠標在控件上顯示的位置, 值為false(默認)時, 從哪里點擊開始拖動, 鼠標位置就在哪里, 如果設置了, 就會在一個相對控件自身左上角偏移位置處, 比如: .
[代碼示例]
$(‘.selector’).draggable(‘option’, ‘cursorAt’, {left: 8, top: 8});
那么拖動過程中, 鼠標就會在自身的左上角向下向右各偏移8像素處

(7)delay:

[類型]整數, 單位是毫秒
[默認值]0
[產生影響]
可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的延時. 該選項可以被用來阻止一些不期望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵按下, 到delay指定的時間, 如果鼠標左鍵還沒有松開, 那么就認為這次拖動有效, 否則, 認為這次拖動無效.
[代碼示例]
$(‘.selector’).draggable({ delay: 500 });

(8)distance:

[類型]整數, 單位是像素
[默認值]1
[產生影響]
可拖動控件從鼠標左鍵按下開始, 到拖動效果產生的時鼠標必須產生的位移. 該選項可以被用來阻止一些不期望的點擊帶來的無效拖動. 具體效果是: 一次拖動, 從鼠標左鍵按下, 只有當鼠標產生的位移達到distance指定的值時, 才認為是有效的拖動.
[代碼示例]
$(‘.selector’).draggable({ distance: 30 });

(9)grid:

[類型]數組[x, y], x代表水平大小, y代表垂直大小, 單位是像素
[默認值]false
[產生影響]
可拖動控件拖動時采用grid的方式拖動, 也就是說拖動過程中的單位是guid選項指定的數組描述的格子那么大.
[代碼示例]
$(‘.selector’).draggable({ grid: [50, 20] });

(10)handle:

[類型]選擇器或元素
[默認值]false
[產生影響]
指定觸發拖動的元素. 用法: 將一個id=window的div設置為可拖動控件, 設置它的handle是該div中的一個id=title的span, 那么, 就只有在id=title的span上點擊拖動才是有效的. 注意: 該元素一定要是可拖動控件的子元素.
[代碼示例]
$(‘.selector’).draggable({ handle: ‘h3′ });

(11)helper:

[類型]字符串或函數
字符串取值:
‘original’: 可拖動控件本身移動
‘clone’: 將可拖動控件自身克隆一個移動, 自身在原始位置不變
函數則必須返回一個DOM元素: 以函數返回的DOM元素移動展現拖動的過程.
[默認值]‘original’
[產生影響]
拖動過程中幫助用戶知道當前拖動位置的元素.
[代碼示例]
$(‘.selector’).draggable({ helper: ‘clone’ });
helper: function(event){
return $( “

” );
}

(12)opacity:

[類型]浮點數值
[默認值]false
[產生影響]
拖動過程中helper(拖動時跟隨鼠標移動的控件)的不透明度.
[代碼示例]
$(‘.selector’).draggable({ opacity: 0.35 });

(13)revert:

[類型]Boolean, 字符串
true: 每次拖動停止之后, 元素自動回到原始位置
‘invalid’: 除非是一個droppable并且被drop(放)成功了, 才不將元素返回到原始位置.
‘valid’: 除invalid之外的其他情況.
[默認值]false
[產生影響]
影響一次拖動之后是否回歸到原始位置.
[代碼示例]
$(‘.selector’).draggable({ revert: true });

(14)revertDuration:

[類型]整數
[默認值]500
[產生影響]
revert(回歸到原始位置)整個過程需要的時間, 單位是毫秒. 如果設置revert選項設置為false, 則忽略此屬性.
[代碼示例]
$(‘.selector’).draggable({ revertDuration: 1000 });

(15)scope:

[類型]字符串
[默認值]‘default’
[產生影響]
在多個draggable和droppable對象的情況下，為了防止混亂，用來和droppable的對象進行分組。
只有處在同一個分組里，droppable才會接受。
該選項描述一個范圍, 和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’ });

(16)scroll:

[類型]Boolean
[默認值]true
[產生影響]
如果設置為true, 在拖動過程中超出可拖動控件容器的時候, 容器自動增加滾動條
[代碼示例]
$(‘.selector’).draggable({ scroll: false });

(17)scrollSensitivity:

[類型]整數值
[默認值]20
[產生影響]
滾動條的敏感度.
下面所屬的鼠標指針是指在draggable控件移動過程中, 鼠標所處位置.
鼠標指針和與draggable控件所在容器的邊距離為多少的時候, 滾動條開始滾動.
[代碼示例]
$(‘.selector’).draggable({ scrollSensitivity: 40 });

(18)scrollSpeed:

[類型]整數值
[默認值]20
[產生影響]
由于scrollSensitivity導致的滾動發生時, 滾動條一次滾動多少像素值.
[代碼示例]
$(‘.selector’).draggable({ scrollSpeed: 40 });

(19)snap

:
[類型]Boolean, 選擇器
[默認值]false
[產生影響]
吸附功能, 設置為true等價與設置選擇器.ui-draggable, 具體效果是在選擇器指定的所有元素上, 當前的draggable控件都可以實現吸附功能, 吸附就是拖動過程中, 靠近但是還沒有挨上目標組件是, 自動的將正在拖動的組件吸過去.
[代碼示例]
$(‘.selector’).draggable({ snap: true });

(20)snapMode:

[類型]字符串, 可選值如下
‘inner’: 在指定的元素內部可以吸附
‘outer’: 在指定元素外部可以吸附
‘both’: 里面外面都可以吸附.
[默認值]‘both’
[產生影響]
設定吸附時候的模式.
[代碼示例]
$(‘.selector’).draggable({ snapMode: ‘outer’ });

(21)snapTolerance:

[類型]整數
[默認值]20
[產生影響]
設定離目標對象的邊多少像素的時候, 進行吸附.
[代碼示例]
$(‘.selector’).draggable({ snap: true });

(22)stack:

[類型]對象{group: ‘.selector’, min: 50}
[默認值]false
[產生影響]
一次初始化一組draggable控件的時候, 將其中的一些draggable控件以給定選擇器選擇, 作為一組, 這時, 這一組draggable控件就可以實現當前被拖動的始終在最前效果, min用來指定這一組的z-index值的最小值.
[代碼示例]
$(‘.selector’).draggable({ stack: { group: ‘products’, min: 50 } });

(23)zIndex:

[類型]整數
[默認值]false
[產生影響]
拖動時的helper(跟隨鼠標移動的控件)的z-index值. z-index就是css中的層疊層數, 數值越大, 越在上層.
[代碼示例]
$(‘.selector’).draggable({ zIndex: 2700 });

五、droppable的超級詳細參數說明

1、事件

（1）activate

[產生影響]
這個事件會在任何允許的draggable對象開始拖動時觸發.
它可以用來在你想讓droppable對象在可以被填充的時”亮起來”的時候.
[代碼示例]
$(‘.selector’).droppable({ activate: function(event, ui) { … } });

（2）deactivate

[產生影響]
此事件會在任何允許的draggable對象停止拖動時觸發.
[代碼示例]
$(‘.selector’).droppable({ deactivate: function(event, ui) { … } });

（3）over

[產生影響]
此事件會在一個允許的draggable對象”經過”(根據tolerance參數的定義判斷)這個droppable對象時觸發.
[代碼示例]
$(‘.selector’).droppable({ over: function(event, ui) { … } });

（4）out

[產生影響]
會在一個允許的draggable對象離開(根據tolerance參數的定義判斷)這個droppable對象時觸發.
[代碼示例]
$(‘.selector’).droppable({ out: function(event, ui) { … } });

（5）drop

[產生影響]
這個事件會在一個允許的draggable對象填充進這個droppable對象時觸發.
回調函數中, $(this) 表示被填充的droppable對象. ui.draggable 表示draggable對象.
[代碼示例]
$(‘.selector’).droppable({ drop: function(event, ui) { … } });

2、參數（選項

）

（1）accept

[類型]Selector, Function
[默認值]‘*’
接受所有符合選擇器條件的draggable對象. 如果指定了一個函數, 該函數要求為頁面上每個draggable對象(符合函數第一個條件的對象)提供一個過濾器.如果要這些元素被dropable接受,該函數需要返回true.
[代碼示例]
使用指定的accept參數初始化一個droppable.
$(‘.selector’).droppable({ accept: ‘.special’ });

(2)activeClass

[類型]String
[默認值]false
[產生影響]
如果指定了該參數,在被允許的draggable對象填充時,droppable會被添加上指定的樣式.
[代碼示例]
使用指定的activeClass參數初始化一個droppable.
$(‘.selector’).droppable({ activeClass: ‘.ui-state-highlight’ });

(3)addClasses

[類型]Boolean
[默認值]true
[產生影響]
如果設置為false, 可以防止ui-droppable類在進行時添加. 這可能會使在初始化數百個元素執行.droppable()時使性能得到理想的優化.
[代碼示例]
使用指定的addClasses參數初始化一個droppable.
$(‘.selector’).droppable({ addClasses: false });

(4)greedy

[類型]Boolean
[默認值]false
[產生影響]
如果設置為true,將在嵌套的droppable對象中阻止事件的傳播.（阻止事件向上冒泡）
[代碼示例]
使用指定的greedy參數初始化一個droppable.
$(‘.selector’).droppable({ greedy: true });

(5)hoverClass

[類型]String
[默認值]false
[產生影響]
如果設置了該參數,將在一個被允許的draggable對象懸停在droppable對象上時向droppable對象添加一個指定的樣式.
[代碼示例]
使用指定的hoverClass參數初始化一個droppable.
$(‘.selector’).droppable({ hoverClass: ‘drophover’ });

(6)scope

[類型]String
[默認值]‘default’
[產生影響]
用來設置draggle對象和droppable對象的組, 除了droppable中的accept屬性指定的元素外,和droppable對象相同組的draggable對象也被允許添加到droppable對象中.
[代碼示例]
使用指定的scope參數初始化一個droppable.
$(‘.selector’).droppable({ scope: ‘tasks’ });

(7)tolerance

[類型]String
允許使用的值: ‘fit’, ‘intersect’, ‘pointer’, ‘touch’.
fit: draggable 完全重疊到droppable
intersect: draggable 和droppable至少重疊50%
pointer: 鼠標重疊到droppable
touch: draggable和droppable的任意重疊
[默認值]‘intersect’
[產生影響]
指定使用那種模式來測試一個draggable”經過”一個droppable對象.
[代碼示例]
使用指定的tolerance參數初始化一個droppable.
$(‘.selector’).droppable({ tolerance: ‘fit’ });