jQuery EasyUI 基礎插件 – Draggable 可拖拽

2018-09-11 09:07 更新

jQuery EasyUI 基礎插件 - Draggable 可拖動

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.draggable.defaults 重寫默認的 defaults。

用法

通過標記創(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'
});

屬性

名稱 類型 描述 默認值
proxy string,function 拖動時要使用的代理元素，設置為 'clone' 時，克隆元素將被用作代理。如果指定一個函數，它必須返回一個 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 如果設置為 true，拖動結束后元素將返回它的開始位置。 false
cursor string 拖動時的 css 光標（cursor）。 move
deltaX number 拖動的元素相對于當前光標的 X 軸位置。 null
deltaY number 拖動的元素相對于當前光標的 Y 軸位置。 null
handle selector 啟動可拖動（draggable）的處理（handle）。 null
disabled boolean 如果設置為 true，則停止可拖動（draggable）。 false
edge number 能夠在其中開始可拖動（draggable）的拖動寬度。 0
axis string 定義拖動元素可在其上移動的軸，可用的值是 'v' 或 'h'，當設為 null，將會沿著 'v' 和 'h' 的方向移動。 null

事件

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

方法

名稱 參數 描述
options none 返回選項（options）屬性（property）。
proxy none 如果設置了代理（proxy）屬性就返回拖動代理（proxy）。
enable none 啟用拖動動作。
disable none 禁用拖動動作。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號