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）プロパティを返します。
proxy none プロキシ（proxy）プロパティが設定されている場合、ドラッグプロキシ（proxy）を返します。
enable none ドラッグ操作を有効にします。
disable none ドラッグ操作を無効にします。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張