Draggable

解説

要素をドラッグできるようにします。

書式

jQuery_Object.draggable([options]);

依存ファイル

• jquery.ui.core.js
• jquery.ui.widget.js
• jquery.ui.mouse.js
• jquery.ui.draggable.js

引数

• optionsオプション
  String: "disable"、 "enable"、"destroy" のいずれか。
  

  値	説明
  "disable"	一時的にドラッグ機能を無効にします。
  "enable"	ドラッグ機能を有効にします。
  "destroy"	ドラッグ機能を完全に破棄します。

  
  Object: 指定したオプションで、要素にドラッグ機能を追加します。（キーと値のハッシュ）
  

  プロパティ	型	初期値	説明
  appendTo	Element, Selector	"parent"	helperのコンテナとして使用する要素を指定します。指定しない場合、helperはドラッグ要素と同じコンテナを使用します。
  axis	String	false (制限なし)	ドラッグできる方向を制限します。"x"を指定すると横方向、"y"を指定すると縦方向です。
  cancel	Selector	":input"	指定した要素を掴んでもドラッグできないようにします。
  containment	Element, Selector	なし	ドラッグの範囲を制限します。指定した要素内でのみドラッグが可能になります。"parent"（親要素内）、"document"（ドキュメント内）、DOM要素、jQueryセレクタを指定できます。
  cursor	String	なし	ドラッグ中のカーソルを指定します。CSSのcursorプロパティの値が指定できます。
  cursorAt	Object, Array	なし	ドラッグ中のカーソルの位置を指定します。要素に対するカーソルのtop, left, right, bottomを、ハッシュで指定することができます。
  delay	Integer	0	ドラッグを開始するまでの時間をミリ秒で指定します。
  distance	Integer	1	指定されたpixelを超えたところまで引きずらないと、ドラッグが開始されないようにします。
  grid	[Integer x, Integer y]	なし	指定したx, y座標毎にsnap(吸い付き)します。
  handle	Element, Selector	なし	指定した要素をクリックしてドラッグを開始するようにします。
  helper	String, Function	"original"	ドラッグ中の表示方法を指定します。 "clone"を指定すると、要素を複製して表示するghostingエフェクトが適用されます。 "original"を指定すると、ドラッグ要素をマウスカーソルに合わせて動かします。 また、DOM要素を返す関数オブジェクトを指定して、独自のエフェクトを設定することができます。
  opacity	Float	なし	ドラッグ中の不透明度を指定します。
  revert	Boolean	なし	trueを指定すると、ドラッグ終了時に、ドラッグ開始位置に要素が戻ります。
  scroll	Boolean	false	trueを指定すると、ドラッグ中に表示領域を出た場合、ウィンドウを自動的にスクロールします。
  scrollSensitivity	Integer	20	スクロールを開始する表示領域の端からの距離をpixelで指定します。この距離は、ドラッグ要素ではなくマウスカーソルとの距離です。
  scrollSpeed	Integer	20	scrollSensitivityオプションで指定した距離に入った時の、スクロール速度を指定します。
  snap	Boolean, Selector	なし	指定したセレクタの要素にsnap(吸い付き)するようにします。trueを指定すると、".ui-draggable"要素（つまり他のDraggable要素）にsnapします。
  snapMode	"inner", "outer"	なし	"inner"を設定すると、対象の要素の内側にのみsnapするようになります。"outer"は外側のみにsnapするようになります。
  snapTolerance	Integer	20	snap対象要素との距離が、指定した距離(pixel)内になったときにsnapするようにします。
  refreshPositions	Boolean	Boolean	trueを指定すると、あらゆるマウス移動時においてドラッグ座標を計算します。精細に動くようになりますが、非常にパフォーマンスが悪くなります。
  zIndex	Integer	なし	ドラッグ要素の重ね合わせの順序を数値で指定します。数値が大きいほど、手前に表示されます。
  start	Function(e, ui)	なし	ドラッグが開始されるときに呼び出されるイベントハンドラ関数を指定します。
  drag	Function(e, ui)	なし	ドラッグ中に呼び出されるイベントハンドラ関数を指定します。
  stop	Function(e, ui)	なし	ドラッグが終了したときに呼び出されるイベントハンドラ関数を指定します。

  
  

  イベントハンドラ関数

  イベントハンドラ関数(start, drag, stop)には2つの引数が渡されます。
  第1引数には、イベントオブジェクトが渡されます。
  第2引数には、以下のプロパティを持ったオブジェクトが渡されます。

  プロパティ	説明
  options	Draggable要素に指定したオプションです。
  position	Draggable要素とhelperオブジェクトの相対位置です。 top, left プロパティを持ちます。
  absolutePosition	helperオブジェクトの絶対位置です。 top, left プロパティを持ちます。
  helper	helperオブジェクトです。

戻り値

• jQuery: jQueryオブジェクト

例

例1:様々なオプションで、Draggable要素を生成します。（オプションと動きを確認してください。）

  axis: "x",
  revert: true,
  cancel: "div.cancel"

  snap: ".gray",
  snapTolerance: 50,
  opacity: 0.5

  grid: [30, 30],
  helper: "clone"
  zIndex: 1000

  cursor: "move",
  scroll: true,
  handle: "div.handle"

  drag: function(e, ui) {
    $(".drag")
      .show()
      .fadeOut(1000);
  }

Draggable要素に付与されるクラス

Draggable要素には、状態に応じて以下のクラスが設定されます。

クラス	状態
ui-draggable	Draggable要素
ui-draggable-dragging	ドラッグ中
ui-draggable-disabled	ドラッグ無効

例）draggable("disable")を呼び出され、ドラッグ無効状態のDraggable要素

<draggable要素 class="ui-draggable ui-draggable-disabled" />

ページトップヘ

ページトップヘ