jQuery EasyUI 基礎插件 - Draggable 可拖動

jQuery EasyUI 插件 jQuery EasyUI 插件

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

用法

通過標記創建可拖動（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 創建可拖動（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 對象。
下麵的實例演示了如何創建簡單的代理對象。 
$('.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 拖動前觸發，返回 false 就取消拖動。
onStartDrag e 目標對象開始拖動時觸發。
onDrag e 拖動期間觸發。返回 false 將不進行實際的拖動。
onStopDrag e 拖動停止時觸發。

方法

名稱 參數 描述
options none 返回選項（options）屬性（property）。
proxy none 如果設置了代理（proxy）屬性就返回拖動代理（proxy）。
enable none 啟用拖動動作。
disable none 禁用拖動動作。
jQuery EasyUI 插件 jQuery EasyUI 插件