【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  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-
「いつかは壊れるサーバ」そんな故障に
迅速で安価に手軽に対応する方法とは？
New！
「特権ユーザー」の事件を防げ！
万能権限を持つユーザーの管理方法とは？
New！
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 TomcatやJBossなどAPサーバ環境に関する
情報を集約！ “業務”用APサーバ大百科
New！
◆ 　 一気に解説！　最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など
New！
◆ 　 クラウド的ユーザー体験の変化は脅威か？
仮想化技術を使いこなす運用管理術を紹介
New！

◆ 　 上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは？
New！
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策
◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？

◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」
◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？

◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ