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

パターンとライブラリで作るAjaxおいしいレシピ(5):jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ (2/4)

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

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 選択解除中のイベントハンドラを指定

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

 Selectablesのイベントハンドラは第2引数から次のような情報を取得可能です。

  • ui.options:selectableの初期化時に指定したオプション
  • ui.selectable:現在のselectable
  • ui.selected:選択された要素
  • ui.selecting:選択中の要素
  • ui.unselected:選択解除された要素
  • ui.unselecting:選択解除中の要素

 さらに次ページからは、今回のサンプルを分解して今回紹介したテクニックがサンプルでどのように使われたか徹底解説していきます。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。