• twitter
  • Facebook
  • はてなブックマーク
2012年06月12日(火)

[jQueryUI入門] ドラッグ アンド ドロップの使い方

Drag&Dropは、jQueryUIのサポート機能を使って実装します。dropは単体では使いません。drag機能と組み合わせて使用します。指定したブロック要素(ドラッグアイテム)を特定のエリアへドラッグした際、何かイベントを発生させたり計算したりする際に使います。

javascriptファイルのロード

「jquery.js」「jquery.ui.core.js」と「jquery.ui.widget.js」「jquery.ui.mouse.js」の4つが必須です。jQueryUIの1.8以降は、draggableファイルとdroppableファイルが分かれているので、Draggable機能を使う場合は「jquery.ui.draggable.js」、Droppable機能を使う場合は「jquery.ui.droppable.js」もロードします。Drag&Dropの機能はほとんどがjavascriptによって管理します。ui-draggableやui-contentなどのクラス名を使ったテーマ機能も使えますが、必須ではありません。

ドラッグ機能を実装する

指定したjQueryオブジェクトをドラッグ可能にするためには、次のように記述します。

  1. <script type="text/javascript">
  2. // 初期化
  3. $(function(){ $('#selecter').draggable({ /* ドラッグ機能の初期設定 */ }); }
  4. </script>
初期化用の主なパラメータ
オプションの名前概要
appendToドラッグ中のヘルパーを追加する対象セレクター
axisドラッグ可能な方向(‘x’なら横移動のみ。’y'なら縦移動のみ)
connectToSortable指定したsortable範囲を適用するセレクタ名
ドラッグ&ドロップエリアを制限して並び替えを行うために指定
containmentドラッグ可能な範囲を制限する。(‘parent’や’window’、ドラッグ可能範囲のセレクタ名)
または[x1,y1,x2,y2]座標の配列
cursorドラッグ中に適用されるカーソルタイプ(CSSの値)
delayマウスを押してからドラッグ開始するまでの遅延時間。(ミリ秒単位)
handle特定の要素をクリックした時のみドラッグ可能にするために、セレクタ名を指定
helperドラッグ表示用に使われるもの。 ‘clone’はセレクタのコピーを複製したもの。(元のセレクタには影響しない)
‘original’(デフォルト)なら対象セレクタ自身。
または、HTMLDOMエレメントを返す関数
iframeFixtrueにするとドラッグヘルパーがiframe上にある場合は、iframe内のクリックを防止
opacityドラッグ中のドラッグヘルパー不透明度(0.0~1.0)
revertDroppableと組み合わせて使う。
trueなら常に。
‘valid’ならドロップの中にあれば初期位置に戻す。
‘invalid’ならドロップの中になければ、初期位置に戻す。
revertDurationrevertがtrueの時に、初期位置へ戻すスピード(ms単位)
scopeドラッグ&ドロップのアイテムをグループとして使用する場合のグループ名。droppableのオプションの値にも指定する
snap他の要素と重なった時に、エッジの重なり具合を制御。
セレクタ名、true、[x,y]配列のいずれかの値
zIndexドラッグ中のヘルパーのz-indexの値

イベントの設定

イベントを設定する場合、セレクタのイベントとしてbindするか、初期化メソッド内でコールバック関数を設定します。例えば、「ドラッグ停止時」に何か関数を呼び出す場合は次のように記述します。

  1. <script type="text/javascript">
  2. // 初期化時にイベントを登録
  3. $(function(){ $('.selecter').draggable({ stop : function(event, ui){ } }); }
  4. // バインドしてイベントを登録
  5. $(function(){ $('.selecter').bind("dragstop", function(event, ui){ } }); }
  6. </script>

引数のeventはUIイベントオブジェクト、uiはUIウィジットオブジェクトです。uiにはui.helper(ドラッグされたヘルパーオブジェクト)、ui.position(現在のヘルパーの相対位置)、ui.offset(現在のヘルパーの絶対位置)を持っています。

例えば、イベント内でドラッグされたヘルパーの現在位置を知りたい場合は、ui.position.topまたはui.position.leftで取得できます。

ドラッグのサンプル

revertがtrueのヘルパー
クローンがドラッグされます。
このセレクタ自身の位置は変更されません。
スナップを設定
値はtrueです

ドロップ機能を実装する

ドラッグされた際にイベントを発生させるためのエリアとして、ドロップ機能を実装します。ショッピングカートのようなドロップ機能を実装する場合は、2つのドロップエリアを作成して、ドラッグされたhelperアイテムの親をappendToなどを使って切り替えるなどの処理を行います。また、コンテキストを使用したイベント管理を行うなどしてクラス名だけでなく、セレクタが含まれるコンテナをjQueryオブジェクトとして指定するなど厳密な管理を行います※1。1つだけのドロップエリアを作成し、ドラッグされたhelperアイテムに対して何かを行いたい場合にも使えます。その際は、ドラッグされたかどうかの判定などに使用できます。

コンテキストについて※1 コンテキストは、例えば<div id="foo"><p>TITLE</p></div>と、<div id="bar"><p>TITLE</p></div>の2つの要素があった時に、$(‘p’, $(‘#foo’))などと書いて、pタグが含まれるコンテナをid="foo"を持つセレクタ内に限定する方法です。
初期化用の主なパラメータ
オプションの名前概要
acceptドロップを許可するドラッグヘルパーのセレクタ名
activeClassドロップエリアがアクティブになったら付与されるクラス名
  1. <script type="text/javascript">
  2. // 初期化時にイベントを定義
  3. $(function(){ $('#selecter').droppable({
  4. accept : 'ドロップに対応するセレクタ名',
  5. drop : function(event, ui){ }
  6. }); }
  7. </script>

イベントの管理

drag同様に、イベントを設定する場合、セレクタのイベントとしてbindするか、初期化メソッド内でコールバック関数を設定します。例えば、「ドラッグヘルパーがドロップされた際」に何か関数を呼び出す場合は、dropイベントの設定を行います。

各コールバック関数の引数、eventはUIイベントオブジェクト、uiはUIウィジットオブジェクトです。uiにはui.draggable(ドロップされたヘルパーオブジェクト)、ui.helper(ui.draggableとほぼ同じ)、ui.position(現在のヘルパーの相対位置)、ui.offset(現在のヘルパーの絶対位置)を持っています。

主なイベントの種類
  • activate ドロップエリア内のドラッグヘルパーがドラッグ開始された時にトリガー
  • deactivate ドロップエリア内のドラッグヘルパーがドラッグ停止された時にトリガー
  • over ドラッグヘルパーがドロップエリア上を通過時に発生
  • out ドラッグヘルパーがドロップエリア外に出た時に発生
  • drop acceptに指定されたドラッグヘルパーがドロップされた時にトリガー

ドラッグ&ドロップのサンプル

ドラッグ範囲を限定して、ドロップエリア内にのみドラッグ可能なように設定しました。カートに追加されれば画像を拡大、カートの中にある時は左のエリアへ戻す事が出来ます。

 お買い物かご

関連投稿記事

Comment: