jQuery EasyUI 教程
通過 $.fn.draggable.defaults 重寫默認(rèn)的 defaults。
通過標(biāo)記創(chuà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)建可拖動(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 | 拖動時要使用的代理元素,設(shè)置為 'clone' 時,克隆元素將被用作代理。如果指定一個函數(shù),它必須返回一個 jQuery 對象。 下面的實例演示了如何創(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,拖動結(jié)束后元素將返回它的開始位置。 | false |
cursor | string | 拖動時的 css 光標(biāo)(cursor)。 | move |
deltaX | number | 拖動的元素相對于當(dāng)前光標(biāo)的 X 軸位置。 | null |
deltaY | number | 拖動的元素相對于當(dāng)前光標(biāo)的 Y 軸位置。 | null |
handle | selector | 啟動可拖動(draggable)的處理(handle)。 | null |
disabled | boolean | 如果設(shè)置為 true,則停止可拖動(draggable)。 | false |
edge | number | 能夠在其中開始可拖動(draggable)的拖動寬度。 | 0 |
axis | string | 定義拖動元素可在其上移動的軸,可用的值是 'v' 或 'h',當(dāng)設(shè)為 null,將會沿著 'v' 和 'h' 的方向移動。 | null |
名稱 | 參數(shù) | 描述 |
---|---|---|
onBeforeDrag | e | 拖動前觸發(fā),返回 false 就取消拖動。 |
onStartDrag | e | 目標(biāo)對象開始拖動時觸發(fā)。 |
onDrag | e | 拖動期間觸發(fā)。返回 false 將不進(jìn)行實際的拖動。 |
onStopDrag | e | 拖動停止時觸發(fā)。 |
名稱 | 參數(shù) | 描述 |
---|---|---|
options | none | 返回選項(options)屬性(property)。 |
proxy | none | 如果設(shè)置了代理(proxy)屬性就返回拖動代理(proxy)。 |
enable | none | 啟用拖動動作。 |
disable | none | 禁用拖動動作。 |