【2/17】今年は「濃厚」技術トーク！＠ITメールセミナー スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷
パターンとライブラリで作るAjaxおいしいレシピ
連載一覧へ
パターンとライブラリで作るAjaxおいしいレシピ（5）

jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ


アークウェブ株式会社
志田 裕樹
2008/3/3

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

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


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

- PR -

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

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

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

図　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) ドラッグ終了時のイベントハンドラを指定

　引き続き次ページでは、DraggablesやDroppables、Selectablesについて解説します。

  1-2-3-4

　INDEX
パターンとライブラリで作るAjaxおいしいレシピ（5）
jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ
Page1
今回は「jQuery UI」のより進んだ活用例
ドラッグを可能にする「Draggables」
  Page2
ドロップを可能にする「Droppables」
ドラッグによる複数選択を可能にする「Selectables」
  Page3
今回のサンプルの基本的な情報
jQuery UIのテクニックがどのように使われたか
  Page4
複数ファイルのドラッグの実装
ドラッグ＆ドロップによるユーザビリティの向上を

パターンとライブラリで作るAjaxおいしいレシピ バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

ホワイトペーパー（TechTargetジャパン）

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
【CTC事例】約30の基幹システムを統合！
膨大なバッチジョブを制御した方法は？
「どこでもオフィス」で業務効率アップ！
PHP研究所モバイルシンクライアント事例
コスト削減・信頼性向上をまとめて満たす
“高信頼Linux”を構築する方法とは？
世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く
急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 企業の仮想化に足りない“発想”とは？
仮想化運用管理のキモは意外なところに！
New！
◆ 　 操作もマニュアルも分かりやすい！
ユーザー視点で開発されたPC管理ツール
New！
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する

◆ 　 セキュリティを知り尽くす上野氏が登壇！
＠ITメールソリューションLive! in Tokyo
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？
◆ 　 世界に通用するストレージの作り方とは？
製品に込めた思いを富士通の開発者に聞く

◆ 　 OSSで手間も時間も、障害も減った――
「マピオンの事例」オープンソース活用法
◆ 　 「ノートPCの持ち出し禁止」で大丈夫？
情報漏えいを防ぐ管理手法とインフラは？
◆ 　 1日の処理を1秒に――MySQLの達人が語る
「コスト削減」できるチューニング

◆ 　 ドキュメント作成を自動化して、SEの作業
効率を大幅アップ！ Visio 2007の魅力
◆ 　 急速に広がるHyper-Vでのサーバ仮想化
そのベストプラクティスをデルが解説
◆ 　 ＠IT主催セミナーで語られた、「担当者に
求められるセキュリティ対策」をレポート

◆ 　 ＠IT「Windows 7」 特設サイトオープン！
最新情報・移行ノウハウを公開しています

→＠IT Special ヘ