jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ：パターンとライブラリで作るAjaxおいしいレシピ（5）（2/4 ページ）

» 2008年03月03日 00時00分公開

[志田裕樹，アークウェブ株式会社]

■ Draggablesのイベントハンドラが取得できる情報

　jQuery UIが提供するドラッグ＆ドロップ関連のイベントハンドラは、第2引数からそのイベントに特化した情報が取得可能です。Draggablesのイベントハンドラには、次のような情報が渡されます（第2引数の変数名を「ui」とした場合）。

ui.instance：draggableのインスタンス
ui.options：draggableの初期化時に指定したオプション
ui.position：ヘルパの現在位置
ui.absolutePosition：ヘルパの現在の絶対指定による位置

　例えば、下記のようにすることで、ドラッグ終了時の座標を取得できます。

<div id='target'>ドラッグ可能</div>

      <script type="text/javascript">

          $('#target').draggable({

              stop: function(e, ui) {

            alert(' top:  ' + ui.position.top + ' left: ' + ui.position.left);

        }

     });

</script>

ドラッグ終了時の座標を取得する例（「ドラッグ可能」というラベルをドラッグしてください。拡大表示はこちら）

　得られる各情報のデータ構造については、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の記述例になります。

<div id='target'>ドラッグ可能</div>

      <div id='goal'>ドロップ可能</div>

      <script type="text/javascript">

          $('#target').draggable();

          $('#goal').droppable(

              {accept: '#target',

               drop:   function(e, ui) {

            alert('ドロップされました');

        }

    });

</script>

Droppablesのシンプルな例（「ドラッグ可能」というラベルを「ドロップ可能」というラベルの上にドラッグ＆ドロップしてください。拡大表示はこちら）

　ドロップさせたいDOM要素（この例では、「<div id='goal'>」）にdroppable()を指定します。今回の例では、オプションとしてacceptとdropを指定しています。acceptは、指定した要素のみをドロップ可能とするように設定です。dropは、ドロップ時のイベントハンドラの指定です。

■ Droppablesに指定可能なオプション

　droppable()のオプションも一部ここで紹介します。詳しくは「UI/Droppables/drappable - jQuery JavaScript Library」の「options」タブを参照してください。また、各オプション指定ごとのサンプルは、「Droppable Demo」を参照してください。

**表2 Droppablesの主なオプション**
オプション名	指定する値	説明
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の記述例です。

<div id='target'>

          <div>item 1</div>

          <div>item 2</div>

          <div>item 3</div>

      </div>

      <script type="text/javascript">

          $('#target').selectable();

      </script>

Selectablesのシンプルな例（「item 1」「item 2」「item 3」というラベルをドラッグで表れる線で囲んでください）

　上記サンプルでは、targetの子要素であるitem 1～3をマウスによる矩形指定で選択できるようにしています。選択させたい要素の親要素（この例では、「<div id='target'>」）に、selectable()を指定しています。selectable()が実行されたDOM要素は、下記のようになります。

<div id="target" class="ui-selectable">

　同様にその子要素には、下記のようにCSSのクラスが自動的に付与されます。

<div id="target" class="ui-selectee">

　また、ドラッグ中に子要素が選択されると、下記のようになります。

<div class="ui-selectee ui-selecting">

　同様に選択が完了すると、下記のようにCSSクラスが付与されます。

<div class="ui-selectee ui-selected">

　これにより、選択中や、選択完了の要素の見た目をスタイルシートで差別化することができます。

■ Selectablesに指定可能なオプション

　selectable()のオプションの一部もここで紹介します。詳しくは「UI/Selectables/selectable - jQuery JavaScript Library」の「options」タブを参照してください。また、各オプション指定ごとのサンプルは、「Selectable Demo」を参照してください。

**表3 Selectablesの主なオプション**
オプション名	指定する値	説明
selected	Function	選択完了時のイベントハンドラを指定
selecting	Function	選択中のイベントハンドラを指定
unselected	Function	選択解除時のイベントハンドラを指定
unselecting	Function	選択解除中のイベントハンドラを指定