■ Draggablesのイベントハンドラが取得できる情報
jQuery UIが提供するドラッグ＆ドロップ関連のイベントハンドラは、第2引数からそのイベントに特化した情報が取得可能です。Draggablesのイベントハンドラには、次のような情報が渡されます（第2引数の変数名を「ui」とした場合）。
- ui.instance：draggableのインスタンス
- ui.options：draggableの初期化時に指定したオプション
- ui.position：ヘルパの現在位置
- ui.absolutePosition：ヘルパの現在の絶対指定による位置
例えば、下記のようにすることで、ドラッグ終了時の座標を取得できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ドラッグ終了時の座標を取得する例（「ドラッグ可能」というラベルをドラッグしてください。拡大表示はこちら）
得られる各情報のデータ構造については、FirebugなどのDOMインスペクタを提供するツールで確認してください。
編集部注：Firebugについて詳しく知りたい読者は、「Firebugとは？ Webサイト作成にどう役立つのか？」をご参照ください。
■ ドラッグの一時無効化、有効化
draggable()の引数にハッシュ形式のオプションではなく「'disable'」というStringを与えると、一時的にドラッグを無効化できます。同様に、「'enable'」を与えると、一時的な無効化から有効化できます。「'destory'」を指定すると、機能を完全に削除できます（参考）。
ドロップを可能にする「Droppables」
では次に、Droppablesのシンプルな使用例を見てみましょう。Droppablesは、draggableとなった要素を別のDOM要素にドロップできるようにする機能を提供します。Dropaablesを使用するために<script>タグを使用して、読み込む必要があるファイルは下記のとおりです（参考「UI/Droppables - jQuery JavaScript Library」の「Dependancies」の部分）。
- jquery-1.2.3.min.js
- jquery.dimensions.js
- ui.mouse.js
- ui.draggable.js
- ui.draggable.ext.js
- ui.droppable.js
- ui.droppable.ext.js
下記はDroppablesの記述例になります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Droppablesのシンプルな例（「ドラッグ可能」というラベルを「ドロップ可能」というラベルの上にドラッグ＆ドロップしてください。拡大表示はこちら）
ドロップさせたいDOM要素（この例では、「<div id='goal'>」）にdroppable()を指定します。今回の例では、オプションとしてacceptとdropを指定しています。acceptは、指定した要素のみをドロップ可能とするように設定です。dropは、ドロップ時のイベントハンドラの指定です。
■ Droppablesに指定可能なオプション
droppable()のオプションも一部ここで紹介します。詳しくは「UI/Droppables/drappable - jQuery JavaScript Library」の「options」タブを参照してください。また、各オプション指定ごとのサンプルは、「Droppable Demo」を参照してください。
| オプション名 | 指定する値 | 説明 | |
|---|---|---|---|
| accept | Boolean Function(draggable) | ドラッグ中の要素がドロップ可能かどうかの判定の仕方を関数で指定 | |
| accept | String | ドラッグ中の要素がドロップ可能かどうかをセレクタで指定 | |
| hoverClass | String | ドラッグ中の要素がドロップ可能な要素に重なった際に付与されるCSSのクラス名を指定 | |
| drop | Function(e, ui) | ドロップ時のイベントハンドラを指定 |
■ Droppablesのイベントハンドラが取得できる情報
Droppablesのイベントハンドラは第2引数から次のような情報を取得可能です。
- ui.instance：droppableのインスタンス
- ui.options：droppableの初期化時に指定したオプション
- ui.position：ヘルパの現在位置
- ui.absolutePosition：ヘルパの現在の絶対指定による位置
- ui.draggable：現在のdraggable
- ui.helper：現在のヘルパ
ドラッグによる複数選択を可能にする「Selectables」
次に、Selectablesのシンプルな利用例を見てみましょう。Selectablesは、指定したDOM要素の子要素をドラッグで複数選択できるようにする機能を提供します。Selectablesを利用するために読み込みの必要なファイルは下記です（参考「UI/Selectables - jQuery JavaScript Library」 の「Dependancies」の部分）。
- jquery-1.2.3.min.js
- jquery.dimensions.js
- ui.mouse.js
- ui.draggable.js
- ui.draggable.ext.js
- ui.droppable.js
- ui.droppable.ext.js
- ui.selectable.js
下記がSelectablesの記述例です。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
Selectablesのシンプルな例（「item 1」「item 2」「item 3」というラベルをドラッグで表れる線で囲んでください）
上記サンプルでは、targetの子要素であるitem 1〜3をマウスによる矩形指定で選択できるようにしています。選択させたい要素の親要素（この例では、「<div id='target'>」）に、selectable()を指定しています。selectable()が実行されたDOM要素は、下記のようになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
同様にその子要素には、下記のようにCSSのクラスが自動的に付与されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
また、ドラッグ中に子要素が選択されると、下記のようになります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
同様に選択が完了すると、下記のようにCSSクラスが付与されます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
これにより、選択中や、選択完了の要素の見た目をスタイルシートで差別化することができます。
■ Selectablesに指定可能なオプション
selectable()のオプションの一部もここで紹介します。詳しくは「UI/Selectables/selectable - jQuery JavaScript Library」の「options」タブを参照してください。また、各オプション指定ごとのサンプルは、「Selectable Demo」を参照してください。
| オプション名 | 指定する値 | 説明 | |
|---|---|---|---|
| selected | Function | 選択完了時のイベントハンドラを指定 | |
| selecting | Function | 選択中のイベントハンドラを指定 | |
| unselected | Function | 選択解除時のイベントハンドラを指定 | |
| unselecting | Function | 選択解除中のイベントハンドラを指定 |
■ Selectablesのイベントハンドラが取得できる情報
Selectablesのイベントハンドラは第2引数から次のような情報を取得可能です。
- ui.options：selectableの初期化時に指定したオプション
- ui.selectable：現在のselectable
- ui.selected：選択された要素
- ui.selecting：選択中の要素
- ui.unselected：選択解除された要素
- ui.unselecting：選択解除中の要素
さらに次ページからは、今回のサンプルを分解して今回紹介したテクニックがサンプルでどのように使われたか徹底解説していきます。
Copyright © ITmedia, Inc. All Rights Reserved.