閱讀(5.3k) 書簽贊(0) 我要糾錯(cuò)

jQuery EasyUI 基礎(chǔ)插件 – Draggable 可拖拽

2018-09-11 09:07 更新

jQuery EasyUI 基礎(chǔ)插件 - Draggable 可拖動(dòng)

通過 $.fn.draggable.defaults 重寫默認(rèn)的 defaults。

用法

通過標(biāo)記創(chuàng)建可拖動(dòng)（draggable）元素。

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;">title</div>
</div>

使用 javascript 創(chuàng)建可拖動(dòng)（draggable）元素。

<div id="dd" style="width:100px;height:100px;">
    <div id="title" style="background:#ccc;">title</div>
</div>

$('#dd').draggable({
    handle:'#title'
});

屬性

名稱	類型	描述	默認(rèn)值
proxy	string,function	拖動(dòng)時(shí)要使用的代理元素，設(shè)置為 'clone' 時(shí)，克隆元素將被用作代理。如果指定一個(gè)函數(shù)，它必須返回一個(gè) jQuery 對象。下面的實(shí)例演示了如何創(chuàng)建簡單的代理對象。 $('.dragitem').draggable({ proxy: function(source){ var p = $('<div style="border:1px solid #ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } });	null
revert	boolean	如果設(shè)置為 true，拖動(dòng)結(jié)束后元素將返回它的開始位置。	false
cursor	string	拖動(dòng)時(shí)的 css 光標(biāo)（cursor）。	move
deltaX	number	拖動(dòng)的元素相對于當(dāng)前光標(biāo)的 X 軸位置。	null
deltaY	number	拖動(dòng)的元素相對于當(dāng)前光標(biāo)的 Y 軸位置。	null
handle	selector	啟動(dòng)可拖動(dòng)（draggable）的處理（handle）。	null
disabled	boolean	如果設(shè)置為 true，則停止可拖動(dòng)（draggable）。	false
edge	number	能夠在其中開始可拖動(dòng)（draggable）的拖動(dòng)寬度。	0
axis	string	定義拖動(dòng)元素可在其上移動(dòng)的軸，可用的值是 'v' 或 'h'，當(dāng)設(shè)為 null，將會(huì)沿著 'v' 和 'h' 的方向移動(dòng)。	null

事件

名稱	參數(shù)	描述
onBeforeDrag	e	拖動(dòng)前觸發(fā)，返回 false 就取消拖動(dòng)。
onStartDrag	e	目標(biāo)對象開始拖動(dòng)時(shí)觸發(fā)。
onDrag	e	拖動(dòng)期間觸發(fā)。返回 false 將不進(jìn)行實(shí)際的拖動(dòng)。
onStopDrag	e	拖動(dòng)停止時(shí)觸發(fā)。

方法

名稱	參數(shù)	描述
options	none	返回選項(xiàng)（options）屬性（property）。
proxy	none	如果設(shè)置了代理（proxy）屬性就返回拖動(dòng)代理（proxy）。
enable	none	啟用拖動(dòng)動(dòng)作。
disable	none	禁用拖動(dòng)動(dòng)作。