jquery-draggableまとめ

ドラッグ範囲の拘束
draggable領域の境界を定義することによって、各draggableの動きを制約します.

axisオプションを設定draggableのパスをx軸またはy軸

に制限する.

$( "#draggable" ).draggable({ axis: "y" });
$( "#draggable1" ).draggable({ axis: "x" });

containmentオプションを使用して、親のDOM要素またはjQueryセレクタ

を指定します.

$( "#draggable2" ).draggable({ containment: "#containment-wrapper", scroll: false });
$( "#draggable3" ).draggable({ containment: "parent" });

自動スクロール
draggableがビュー領域外に移動すると、ドキュメントが自動的にスクロールされます.scrollオプションをtrueに設定して自動スクロールを有効にし、スクロールがトリガーされると微調整し、スクロール速度はscrollSensitivityとscrollSpeedオプションで設定します.

$( "#draggable" ).draggable({ scroll: true });
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });

カーソル位置
オブジェクトをドラッグするとカーソルが移動します.既定では、ドラッグされたオブジェクトの中央にカーソルが表示されます.cursorAtオプションを使用してdraggableに対する別の位置を指定します(top、right、bottom、leftに対するピクセル値を指定します).

$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });

カーソルスタイル
有効なCSSカーソル値を持つcursorオプションを指定することで、カーソルの外観を定義します.有効なCSSカーソル値には、default、move、pointer、crosshairなどがあります.

$( "#draggable" ).draggable({ cursor: "move" });
$( "#draggable2" ).draggable({ cursor: "crosshair" });

遅延開始
delayオプションでドラッグ開始遅延のミリ秒数を設定します.

$( "#draggable2" ).draggable({ delay: 1000 });

ドラッグを許可
指定したピクセルをドラッグすると、distanceオプションでカーソルが押され、ドラッグが許可されます.

$( "#draggable" ).draggable({ distance: 20 });

≪イベント｜Events｜ldap≫

start:ドラッグ開始時に

をトリガー

drag:ドラッグ中に

がトリガーされます.

stop:ドラッグストップ時に

をトリガー
Handles-要素(または要素グループ)を指定してドラッグをトリガーします.
ドラッグは、draggableでカーソルが部分的に指定されている場合にのみ許可されます.handleオプションを使用して、オブジェクトをドラッグする要素(または要素グループ)のjQueryセレクタを指定します.

 $( "#draggable" ).draggable({ handle: "p" });

cancel-要素(または要素グループ)を指定するときにドラッグ&ドロップは許可されません
カーソルがdraggable内で要素(または要素グループ)を指定した場合、ドラッグは許可されません.

$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });

リストアの場所
ブール値revertオプション付きdraggableがドラッグを停止した場合、draggable(またはそのアシスタント)を元の位置に戻します.

$( "#draggable" ).draggable({ revert: true });
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });

ビジュアルフィードバック
オブジェクトをアシスタントでドラッグするように、ユーザーにフィードバックします.helperオプションは、値「original」(draggableオブジェクトをカーソルで移動)、「clone」(draggableのコピーをカーソルで移動)、またはドラッグ中にカーソルの近くに表示されるDOM要素を返す関数を受け入れます.アシスタントの透明度をopacityオプションで制御します.
どのdraggableが引きずられているかを区別するために、運動中のdraggableを最前線に保つ.ドラッグしている場合は、zIndexオプションを使用してアシスタントの高さz-indexを設定するか、stackオプションを使用してドラッグを停止すると、最後にドラッグされたアイテムが常に同じグループの他のアイテムの上に表示されることを確認します.

$( "#draggable3" ).draggable({
  cursor: "move",
  cursorAt: { top: -12, left: -20 },
  helper: function( event ) {
    return $( "
I'm a custom helper
" );
  }
});

disabled
draggableを無効にする

$( ".selector" ).draggable({ disabled: true });
$( ".selector" ).draggable('disabled');

enable
使用可能

$( ".selector" ).draggable({ enable: true });
$( ".selector" ).draggable('enable');

その他のオプション、メソッド、イベントなどはjquery-ui-draggable-apiを参照