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

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

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

jQuery、プラグイン、jQuery UI、Web経由のCDNとは
CSSの書き方も分かるjQueryプラグイン実践活用法（1）
基本／おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説
デザインハック＜リッチクライアント 2009/12/8

本記事は2008年に執筆されたものです。jQueryやAjax全般の最新情報は「リッチクライアント & 帳票フォーラム」総合目次のカテゴリ「実践Ajax」や「Ajax技術解説」をご参照ください。

今回は「jQuery UI」のより進んだ活用例

■ jQueryのプラグイン「jQuery UI」とは？

　今回紹介するjQuery UIは、JavaScript（Ajax）フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。

ドラッグ＆ドロップなどのマウス操作の機能拡張
ユーザーインターフェイスを改善するウィジェット（アコーディオン、日付入力、ダイアログ、スライダー、タブなど）

　今回は、jQuery UIのドラッグ＆ドロップ機能にフォーカスし、その使い方から、より進んだ活用例をサンプルを通じて説明していきたいと思います。

図　jQuery UIのページ

　jQueryの基本的な利用の仕方については、連載第1回「jQueryを使ってTwitterをおいしくマッシュアップ」でも解説されていますので、こちらもご参照ください。

■ 今回のサンプル

　まずは、今回のサンプルを見てみましょう。

今回のサンプル・プログラム（拡大表示はこちら、※Firebugを有効にしていると動作が鈍くなることがあります。また、サンプルのライセンスはGPL 2となります））

編集部注：Firebugについて詳しく知りたい読者は、「Firebugとは？ Webサイト作成にどう役立つのか？」をご参照ください。

　このサンプルには次のような機能があります。

ファイルをドラッグで複数選択できる
選択したファイルはドラッグ＆ドロップでディレクトリ内を移動したり
別のディレクトリに移動することができる

　ドラッグ＆ドロップを利用し、より直感的で軽快なユーザーインターフェイスを提供することができます。

■ jQuery UIが提供するドラッグ＆ドロップ機能

　jQuery UIはドラッグ＆ドロップに関連して次の機能を提供しています。

Draggables：DOM要素をドラッグできるようにする
Droppables：draggableとなった要素を別のDOM要素にドロップできるようにする
Selectables：指定したDOM要素の子要素をドラッグで複数選択できるようにする
Sortables：指定したDOM要素の子要素の順番をドラッグ＆ドロップで入れ替えられるようにする
Resizeables：指定したDOM要素のサイズをドラッグ＆ドロップで変更できるようにする

　今回のサンプルは、上記のうちDraggables、Droppables、Selectablesを組み合わせて作成しています。以下では、その3つについてそれぞれの使い方を解説し、その後応用編としてサンプルの内容を解説していきます。

　今回は誌面の関係上Sortables、Resizeablesの解説はできませんが、いずれも基本的な利用方法はDraggablesなどと同じですので、本記事を一読されれば簡単に利用方法が理解できると思います。とても有用なライブラリですので、ぜひ試してみてください。

■ jQuery UIをダウンロードして準備

　jQuery UIを使うための準備をしておきましょう。jQuery UIのサイトから、jQueryのプラグインをダウンロードします。2008年2月26日の原稿執筆時現在では、「jquery.ui-1.5b.zip」というファイルがダウンロードできます。このファイルを展開し、Webサーバにアップロードしておきましょう。

ドラッグを可能にする「Draggables」

　まず、Draggablesの最もシンプルな使用例を見てみましょう。Draggalbesは、DOM要素をドラッグできるようにする機能を提供します。Draggablesを使うためには、jquery.ui-1.5b.zipを解凍して現れるファイルのうち以下のファイルを<head>タグ内で、<script>タグを使って読み込む必要があります（参考：「UI/Draggables - jQuery JavaScript Library」の「Dependancies」の部分）。

<script type="text/javascript" 

          src="javascripts/lib/jquery-1.2.3.min.js"></script>

      <script type="text/javascript" 

         src="javascripts/lib/jquery.dimensions.js"></script>

      <script type="text/javascript" 

         src="javascripts/lib/ui.mouse.js"></script>

      <script type="text/javascript" 

         src="javascripts/lib/ui.draggable.js"></script>

      <script type="text/javascript" 

         src="javascripts/lib/ui.draggable.ext.js"></script>

　そのうえで、下記のHTMLのようにドラッグを可能にしたいDOM要素に、draggable()メソッドを呼び出すだけで、<div id='target'>の要素がドラッグ可能になります。

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

      <script type="text/javascript">

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

</script>

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

　draggable()が実行されたDOM要素は、下記のように「ui-draggable」というクラスが自動的に付与されます。

<div id="target" class="ui-draggable">ドラッグ可能</div>

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

　draggable()の第1引数に次の例のように、ハッシュ形式のオプションを指定することでドラッグ時の挙動をさまざまにカスタマイズできます。

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

      <script type="text/javascript">

          $('#target').draggable({

                snap: true,

                containment: '#container'

            });

      </script>

　指定可能なオプションは非常に多いため、ここでは一部だけ紹介します。詳しくは「UI/Draggables/draggable - jQuery JavaScript Library」の「options」タブを参照してください。また、各オプション指定ごとのサンプルは、「Draggable Demo」を参照してください。

**表1 Draggablesの主なオプション**
オプション名	指定する値	説明
snap	BooleanまたはSelector	ドラッグ時このオプションに指定したDOM要素に接近すると、その要素に吸い付くように接するようになる。「true」と指定すると、'.ui-draggable'というセレクタに一致する要素に「吸い付き」が発生するようになる（「吸い付き」のサンプルとして「Draggable Demo」の「2. Clone as helper」を見るとどういう動作か分かりやすい）
containment	ElementまたはSelector	指定した要素の内側の範囲でのみドラッグ可能にする
grid	[Integer x, Integer y]	指定したサイズの格子上で「吸い付き」が発生
helper	"original"または"clone"またはFunction	「original」を指定すると、draggable()に指定された要素がそのままヘルパ（ドラッグ中にマウスに合わせて動く要素）になる（デフォルト）。「clone」はdraggable()に指定された要素を複製し、ヘルパとして使用。Functionを指定すると、その関数が返すDOM要素がヘルパとして使用される
start	Function(e, ui)	ドラッグ開始時のイベントハンドラを指定。第1引数は、通常のイベントハンドラと同様で、第2引数については後述
drag	Function(e, ui)	ドラッグ中のイベントハンドラを指定
stop	Function(e, ui)	ドラッグ終了時のイベントハンドラを指定