剛接觸的時(shí)候，分不清draggable和droppable的區(qū)別，瞎弄了一會(huì)，其實(shí)很簡(jiǎn)單，draggable就是“拖”的功能，droppable就是“放”的功能。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供趙縣企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站建設(shè)、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為趙縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
Drag me to my target--from ifxoxo.com
Drop here -- from ifxoxo.com
拖動(dòng) #draggable之前的截圖
把#draggable 丟到 #droppable 之后的截圖
這是一個(gè)可以拖動(dòng)的元素--from ifxoxo.com
可以拖動(dòng)到這里來 -- from ifxoxo.com
draggable()函數(shù)有許多參數(shù)和用法，詳見二、4
droppable()函數(shù)有許多參數(shù)和用法(詳見二、5)
有start, stop, drag等事件，這些函數(shù)都接受兩個(gè)參數(shù)：event和ui。
start: 拖動(dòng)開始, 指鼠標(biāo)按下, 開始移動(dòng).
drag: 拖動(dòng)過程中鼠標(biāo)移動(dòng).
stop: 拖動(dòng)結(jié)束.
addClasses:[類型]Boolean(布爾值) [默認(rèn)值]true
是否給draggable元素增加 ui-draggable這個(gè)css的class
axis： [類型]String [支持] ‘x’, ‘y’, false
控制元素 只能沿 X軸|Y軸 移動(dòng)
containment：[類型]選擇器, 元素, 字符串, 數(shù)組
只能在選擇器約束的元素內(nèi)拖動(dòng)
delay：[類型]整數(shù), 單位是毫秒
可拖動(dòng)控件從鼠標(biāo)左鍵按下開始, 到拖動(dòng)效果產(chǎn)生的延時(shí)
還有：distance，distance，handle，helper，opacity （詳見 四、）
activate：在允許的draggable對(duì)象開始拖動(dòng)時(shí)觸發(fā).
deactivate：在允許的draggable對(duì)象停止拖動(dòng)時(shí)觸發(fā).
over：在允許的draggable對(duì)象”經(jīng)過”這個(gè)droppable對(duì)象時(shí)觸發(fā)
out：在允許的draggable對(duì)象離開 這個(gè)droppable對(duì)象時(shí)觸發(fā)
drop：在允許的draggable對(duì)象填充進(jìn)這個(gè)droppable對(duì)象時(shí)觸發(fā).
accept：[類型]Selector, Function [默認(rèn)值]‘*’
允許被放下來的元素.
hoverClass:[類型]String [默認(rèn)值]false
一個(gè)被允許的draggable對(duì)象懸停在droppable對(duì)象上時(shí)添加的class
還有：activeClass，greedy，scope，tolerance （詳見 五、）
1、jquery ui（一）簡(jiǎn)介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進(jìn)度條 progressbar
5、jquery ui（五）日期選擇器 datepicker
有start, stop, drag等事件，這些函數(shù)都接受兩個(gè)參數(shù)：event和ui。
event: 瀏覽器原生的事件 ； ui: 一個(gè)JQuery的ui對(duì)象。
其中ui 有以下屬性：
a) ui.helper: 正在拖動(dòng)的元素的JQuery包裝對(duì)象, ui.helper.context可以獲取到原生的DOM元素.
b) ui.position: ui.helper(也就是我們要拖動(dòng)的元素)相對(duì)于父元素(包含自己的元素, 如果是頂層, 對(duì)應(yīng)body)的偏移, 值是一個(gè)對(duì)象{top, left}—-也就是可以用ui.position.top獲取到該元素與父元素的top當(dāng)前偏移
c) ui.offset: 與ui.position同意, 這里表示的是和瀏覽器內(nèi)容區(qū)域左上邊界的偏移(注意, 是內(nèi)容區(qū)域, 而不是html的body區(qū)域. html的body在默認(rèn)情況下, 各種瀏覽器中都會(huì)相對(duì)offset有偏移的.)
(1) start: 拖動(dòng)開始, 指鼠標(biāo)按下, 開始移動(dòng).
(2) drag: 拖動(dòng)過程中鼠標(biāo)移動(dòng).
(3) stop: 拖動(dòng)結(jié)束.
[代碼示例]
初始化時(shí)設(shè)置事件.
$(‘.selector’).draggable({
start: function(event, ui){ alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});
[類型]Boolean(布爾值)
[默認(rèn)值]true
[產(chǎn)生影響]
用來設(shè)置是否給draggable元素通過ui-draggable樣式才裝飾它. 主要為了在通過.draggable()初始化很多(成百個(gè))元素的時(shí)候優(yōu)化性能考慮, 但是, 這個(gè)選項(xiàng)的設(shè)置, 不會(huì)影響ui-draggable-dragging樣式改變拖動(dòng)過程樣式.
true表示ui-draggable樣式被添加到該元素.
false表示ui-draggable樣式不被添加到該元素.
[代碼示例]draggable其他選項(xiàng)的初始化,
$(‘.selector’).draggable({ addClasses: false });
將.selector選擇器選中的元素渲染成為一個(gè)可拖動(dòng)控件, 不為其添加ui-draggable樣式
[類型]Element, Selector(HTML元素對(duì)象或選擇器)
[默認(rèn)值]‘parent’ 父元素
[產(chǎn)生影響]
用來指定控件在拖動(dòng)過程中ui.helper的容器, 默認(rèn)情況下, ui.helper使用和初始定義的draggable相同的容器, 也就是其父元素.
[代碼示例]
$(‘.selector’).draggable({ appendTo: ‘body’ });
[類型]String, Boolean(可取的值有’x', ‘y’, false)
‘x’: 只能水平拖動(dòng)
‘y’: 只能垂直拖動(dòng)
false: 既可以水平, 也可以垂直拖動(dòng).
[默認(rèn)值]false, 不限制拖動(dòng)的方向
[產(chǎn)生影響]
約束拖動(dòng)過程中的取向.
[代碼示例]
$(‘.selector’).draggable({ axis: ‘x’ });
[類型]選擇器, 元素, 字符串, 數(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]以[開始水平坐標(biāo), 開始垂直坐標(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’ });
$(‘.selector’).draggable({ containment: ‘#demo-frame’ });
[類型]字符串.
[默認(rèn)值]‘a(chǎn)uto’
[產(chǎn)生影響]
影響指定可拖動(dòng)控件在拖動(dòng)過程中的鼠標(biāo)樣式, 該樣式設(shè)定之后, 需要控件的原始元素支持指定的cursor樣式, 如果指定的值原始元素不支持, 則使用原始元素默認(rèn)的cursor樣式.
[代碼示例]
$(‘.selector’).draggable({ cursor: ‘crosshair’ });
[類型]對(duì)象
通過設(shè)置對(duì)象的top, left, right, bottom的屬性值中的一個(gè)或兩個(gè)來確定位置.
[默認(rèn)值]false
[產(chǎn)生影響]
在拖動(dòng)控件的過程中, 鼠標(biāo)在控件上顯示的位置, 值為false(默認(rèn))時(shí), 從哪里點(diǎn)擊開始拖動(dòng), 鼠標(biāo)位置就在哪里, 如果設(shè)置了, 就會(huì)在一個(gè)相對(duì)控件自身左上角偏移位置處, 比如: .
[代碼示例]
$(‘.selector’).draggable(‘option’, ‘cursorAt’, {left: 8, top: 8});
那么拖動(dòng)過程中, 鼠標(biāo)就會(huì)在自身的左上角向下向右各偏移8像素處
[類型]整數(shù), 單位是毫秒
[默認(rèn)值]0
[產(chǎn)生影響]
可拖動(dòng)控件從鼠標(biāo)左鍵按下開始, 到拖動(dòng)效果產(chǎn)生的延時(shí). 該選項(xiàng)可以被用來阻止一些不期望的點(diǎn)擊帶來的無效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 到delay指定的時(shí)間, 如果鼠標(biāo)左鍵還沒有松開, 那么就認(rèn)為這次拖動(dòng)有效, 否則, 認(rèn)為這次拖動(dòng)無效.
[代碼示例]
$(‘.selector’).draggable({ delay: 500 });
[類型]整數(shù), 單位是像素
[默認(rèn)值]1
[產(chǎn)生影響]
可拖動(dòng)控件從鼠標(biāo)左鍵按下開始, 到拖動(dòng)效果產(chǎn)生的時(shí)鼠標(biāo)必須產(chǎn)生的位移. 該選項(xiàng)可以被用來阻止一些不期望的點(diǎn)擊帶來的無效拖動(dòng). 具體效果是: 一次拖動(dòng), 從鼠標(biāo)左鍵按下, 只有當(dāng)鼠標(biāo)產(chǎn)生的位移達(dá)到distance指定的值時(shí), 才認(rèn)為是有效的拖動(dòng).
[代碼示例]
$(‘.selector’).draggable({ distance: 30 });
[類型]數(shù)組[x, y], x代表水平大小, y代表垂直大小, 單位是像素
[默認(rèn)值]false
[產(chǎn)生影響]
可拖動(dòng)控件拖動(dòng)時(shí)采用grid的方式拖動(dòng), 也就是說拖動(dòng)過程中的單位是guid選項(xiàng)指定的數(shù)組描述的格子那么大.
[代碼示例]
$(‘.selector’).draggable({ grid: [50, 20] });
[類型]選擇器或元素
[默認(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: ‘h3′ });
[類型]字符串或函數(shù)
字符串取值:
‘original’: 可拖動(dòng)控件本身移動(dòng)
‘clone’: 將可拖動(dòng)控件自身克隆一個(gè)移動(dòng), 自身在原始位置不變
函數(shù)則必須返回一個(gè)DOM元素: 以函數(shù)返回的DOM元素移動(dòng)展現(xiàn)拖動(dòng)的過程.
[默認(rèn)值]‘original’
[產(chǎn)生影響]
拖動(dòng)過程中幫助用戶知道當(dāng)前拖動(dòng)位置的元素.
[代碼示例]
$(‘.selector’).draggable({ helper: ‘clone’ });
helper: function(event){
return $( “
” );
}
[類型]浮點(diǎn)數(shù)值
[默認(rèn)值]false
[產(chǎn)生影響]
拖動(dòng)過程中helper(拖動(dòng)時(shí)跟隨鼠標(biāo)移動(dòng)的控件)的不透明度.
[代碼示例]
$(‘.selector’).draggable({ opacity: 0.35 });
[類型]Boolean, 字符串
true: 每次拖動(dòng)停止之后, 元素自動(dòng)回到原始位置
‘invalid’: 除非是一個(gè)droppable并且被drop(放)成功了, 才不將元素返回到原始位置.
‘valid’: 除invalid之外的其他情況.
[默認(rèn)值]false
[產(chǎn)生影響]
影響一次拖動(dòng)之后是否回歸到原始位置.
[代碼示例]
$(‘.selector’).draggable({ revert: true });
[類型]整數(shù)
[默認(rèn)值]500
[產(chǎn)生影響]
revert(回歸到原始位置)整個(gè)過程需要的時(shí)間, 單位是毫秒. 如果設(shè)置revert選項(xiàng)設(shè)置為false, 則忽略此屬性.
[代碼示例]
$(‘.selector’).draggable({ revertDuration: 1000 });
[類型]字符串
[默認(rèn)值]‘default’
[產(chǎn)生影響]
在多個(gè)draggable和droppable對(duì)象的情況下，為了防止混亂，用來和droppable的對(duì)象進(jìn)行分組。
只有處在同一個(gè)分組里，droppable才會(huì)接受。
該選項(xiàng)描述一個(gè)范圍, 和droppable的同名選項(xiàng)結(jié)合使用, droppable的accept選項(xiàng)用來設(shè)置可以接受的draggable控件, 同時(shí), 可接受的drggable控件受scope選項(xiàng)約束, 必須是同一個(gè)scope中的draggable和droppable才可以互相拖放.
例如:
$(‘#draggable_a’).draggable({scope: ‘a(chǎn)’});
$(‘#draggable_b’).draggable({scope: ‘b’});
$(‘#droppable_a’).droppable({scope: ‘a(chǎn)’});
$(‘#droppable_b’).droppable({scope: ‘b’});
droppable控件的accept選項(xiàng)默認(rèn)是’*', 看起來數(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’, 說明如果不指定, 大家都還是有scope的, 名字是default而已.
[代碼示例]
$(‘.selector’).draggable({ scope: ‘tasks’ });
[類型]Boolean
[默認(rèn)值]true
[產(chǎn)生影響]
如果設(shè)置為true, 在拖動(dòng)過程中超出可拖動(dòng)控件容器的時(shí)候, 容器自動(dòng)增加滾動(dòng)條
[代碼示例]
$(‘.selector’).draggable({ scroll: false });
[類型]整數(shù)值
[默認(rèn)值]20
[產(chǎn)生影響]
滾動(dòng)條的敏感度.
下面所屬的鼠標(biāo)指針是指在draggable控件移動(dòng)過程中, 鼠標(biāo)所處位置.
鼠標(biāo)指針和與draggable控件所在容器的邊距離為多少的時(shí)候, 滾動(dòng)條開始滾動(dòng).
[代碼示例]
$(‘.selector’).draggable({ scrollSensitivity: 40 });
[類型]整數(shù)值
[默認(rèn)值]20
[產(chǎn)生影響]
由于scrollSensitivity導(dǎo)致的滾動(dòng)發(fā)生時(shí), 滾動(dòng)條一次滾動(dòng)多少像素值.
[代碼示例]
$(‘.selector’).draggable({ scrollSpeed: 40 });
:
[類型]Boolean, 選擇器
[默認(rèn)值]false
[產(chǎn)生影響]
吸附功能, 設(shè)置為true等價(jià)與設(shè)置選擇器.ui-draggable, 具體效果是在選擇器指定的所有元素上, 當(dāng)前的draggable控件都可以實(shí)現(xiàn)吸附功能, 吸附就是拖動(dòng)過程中, 靠近但是還沒有挨上目標(biāo)組件是, 自動(dòng)的將正在拖動(dòng)的組件吸過去.
[代碼示例]
$(‘.selector’).draggable({ snap: true });
[類型]字符串, 可選值如下
‘inner’: 在指定的元素內(nèi)部可以吸附
‘outer’: 在指定元素外部可以吸附
‘both’: 里面外面都可以吸附.
[默認(rèn)值]‘both’
[產(chǎn)生影響]
設(shè)定吸附時(shí)候的模式.
[代碼示例]
$(‘.selector’).draggable({ snapMode: ‘outer’ });
[類型]整數(shù)
[默認(rèn)值]20
[產(chǎn)生影響]
設(shè)定離目標(biāo)對(duì)象的邊多少像素的時(shí)候, 進(jìn)行吸附.
[代碼示例]
$(‘.selector’).draggable({ snap: true });
[類型]對(duì)象{group: ‘.selector’, min: 50}
[默認(rèn)值]false
[產(chǎn)生影響]
一次初始化一組draggable控件的時(shí)候, 將其中的一些draggable控件以給定選擇器選擇, 作為一組, 這時(shí), 這一組draggable控件就可以實(shí)現(xiàn)當(dāng)前被拖動(dòng)的始終在最前效果, min用來指定這一組的z-index值的最小值.
[代碼示例]
$(‘.selector’).draggable({ stack: { group: ‘products’, min: 50 } });
[類型]整數(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 });
[產(chǎn)生影響]
這個(gè)事件會(huì)在任何允許的draggable對(duì)象開始拖動(dòng)時(shí)觸發(fā).
它可以用來在你想讓droppable對(duì)象在可以被填充的時(shí)”亮起來”的時(shí)候.
[代碼示例]
$(‘.selector’).droppable({ activate: function(event, ui) { … } });
[產(chǎn)生影響]
此事件會(huì)在任何允許的draggable對(duì)象停止拖動(dòng)時(shí)觸發(fā).
[代碼示例]
$(‘.selector’).droppable({ deactivate: function(event, ui) { … } });
[產(chǎn)生影響]
此事件會(huì)在一個(gè)允許的draggable對(duì)象”經(jīng)過”(根據(jù)tolerance參數(shù)的定義判斷)這個(gè)droppable對(duì)象時(shí)觸發(fā).
[代碼示例]
$(‘.selector’).droppable({ over: function(event, ui) { … } });
[產(chǎn)生影響]
會(huì)在一個(gè)允許的draggable對(duì)象離開(根據(jù)tolerance參數(shù)的定義判斷)這個(gè)droppable對(duì)象時(shí)觸發(fā).
[代碼示例]
$(‘.selector’).droppable({ out: function(event, ui) { … } });
[產(chǎn)生影響]
這個(gè)事件會(huì)在一個(gè)允許的draggable對(duì)象填充進(jìn)這個(gè)droppable對(duì)象時(shí)觸發(fā).
回調(diào)函數(shù)中, $(this) 表示被填充的droppable對(duì)象. ui.draggable 表示draggable對(duì)象.
[代碼示例]
$(‘.selector’).droppable({ drop: function(event, ui) { … } });
）
[類型]Selector, Function
[默認(rèn)值]‘*’
接受所有符合選擇器條件的draggable對(duì)象. 如果指定了一個(gè)函數(shù), 該函數(shù)要求為頁面上每個(gè)draggable對(duì)象(符合函數(shù)第一個(gè)條件的對(duì)象)提供一個(gè)過濾器.如果要這些元素被dropable接受,該函數(shù)需要返回true.
[代碼示例]
使用指定的accept參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ accept: ‘.special’ });
[類型]String
[默認(rèn)值]false
[產(chǎn)生影響]
如果指定了該參數(shù),在被允許的draggable對(duì)象填充時(shí),droppable會(huì)被添加上指定的樣式.
[代碼示例]
使用指定的activeClass參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ activeClass: ‘.ui-state-highlight’ });
[類型]Boolean
[默認(rèn)值]true
[產(chǎn)生影響]
如果設(shè)置為false, 可以防止ui-droppable類在進(jìn)行時(shí)添加. 這可能會(huì)使在初始化數(shù)百個(gè)元素執(zhí)行.droppable()時(shí)使性能得到理想的優(yōu)化.
[代碼示例]
使用指定的addClasses參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ addClasses: false });
[類型]Boolean
[默認(rèn)值]false
[產(chǎn)生影響]
如果設(shè)置為true,將在嵌套的droppable對(duì)象中阻止事件的傳播.（阻止事件向上冒泡）
[代碼示例]
使用指定的greedy參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ greedy: true });
[類型]String
[默認(rèn)值]false
[產(chǎn)生影響]
如果設(shè)置了該參數(shù),將在一個(gè)被允許的draggable對(duì)象懸停在droppable對(duì)象上時(shí)向droppable對(duì)象添加一個(gè)指定的樣式.
[代碼示例]
使用指定的hoverClass參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ hoverClass: ‘drophover’ });
[類型]String
[默認(rèn)值]‘default’
[產(chǎn)生影響]
用來設(shè)置draggle對(duì)象和droppable對(duì)象的組, 除了droppable中的accept屬性指定的元素外,和droppable對(duì)象相同組的draggable對(duì)象也被允許添加到droppable對(duì)象中.
[代碼示例]
使用指定的scope參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ scope: ‘tasks’ });
[類型]String
允許使用的值: ‘fit’, ‘intersect’, ‘pointer’, ‘touch’.
fit: draggable 完全重疊到droppable
intersect: draggable 和droppable至少重疊50%
pointer: 鼠標(biāo)重疊到droppable
touch: draggable和droppable的任意重疊
[默認(rèn)值]‘intersect’
[產(chǎn)生影響]
指定使用那種模式來測(cè)試一個(gè)draggable”經(jīng)過”一個(gè)droppable對(duì)象.
[代碼示例]
使用指定的tolerance參數(shù)初始化一個(gè)droppable.
$(‘.selector’).droppable({ tolerance: ‘fit’ });
重慶分公司
重慶分公司
