■ ファイルをdraggableにし、初期状態はdisableにしておく
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
この処理は、ページが読み込まれた際に一度だけ行われるファイルの初期化処理に当たります。ここでは、全ファイルに対してdraggable()を設定しています。この際、ディレクトリの親要素である<div id='filer'>の範囲のみドラッグ可能となるようにしています。onStartDrag、onDrag、onStopDragイベントハンドラについては後で解説します。
ファイルは選択状態にならなければドラッグできないようにしますので、いったんdraggableを設定した後に、'disable'で無効化しています。
■ 選択(または、選択解除)されたファイルのドラッグの有効化(または、無効化)
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
これらのメソッドは、ファイルのドラッグによる選択を行ったときと、選択解除を行ったときに呼び出されます。onSelectedイベントハンドラ、onUnselectedイベントハンドラはそれぞれ下記2つの処理を行っています。
- 選択されたファイルのドラッグを有効化
- 選択解除されたファイルのドラッグを無効化
■ dropの条件の設定
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドはファイルをディレクトリの上に重ねた際に、そのファイルがディレクトリにドロップ可能かどうかを調べるために呼び出されます。このメソッドの中では、ドロップ前後のディレクトリを調べ、ドラッグ前に所属していたディレクトリと同一のディレクトリにドロップしていた場合は、ドロップできないようにしています。「get(0)」は配列の0番目を返すメソッドです。
■ ドロップされたらそのディレクトリの子要素になるようにすげ替える
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドはファイルをディレクトリにドロップした際に呼び出されます。ドロップ対象のディレクトリを取得し、すべての選択されたファイルをそのディレクトリ配下に入るようにします。その後、各ファイルの位置を初期化し、その後、選択をすべて解除し、ドラッグを無効化します。jQueryのメソッドチェーンのおかげですっきり書くことができますね。
複数ファイルのドラッグの実装
最後に、複数ファイルのドラッグの実装について解説していきます。
■ ドラッグ開始時に開始位置を保持しておく
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドはドラッグが開始される際に呼び出されます。まず以下の処理で、「つかんでいるファイル」を取得しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
その後、以下の処理でそのファイルが所属しているディレクトリを取得します。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
そして、以下の処理では、セレクタ部分が、例えば、「#directory1 .ui-selected」といった文字列になるので、これでドラッグ対象となるすべてのファイルを選択できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
これらを、「つかんでいるファイル」のオブジェクトに、selectedFilesというプロパティとして保持させています。その後、ドラッグ対象となるすべてのファイルそれぞれに、開始位置を保持させています。
■ 「つかんだファイル」の開始位置からの移動距離の計算
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドはドラッグ中に呼び出されます。最初に、現在の「つかんでいるファイル」の位置と開始位置の差を求め、移動距離を計算しています。
■ 「つかんでいない選択中のファイル」の移動
下記は、上記のコードの続き部分になります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
「つかんでいるファイル」には、ドラッグ対象のファイルの配列である、selectedFilesというメンバが設定されていますので、このメンバが設定されていないファイルが、すなわち「つかんでいない選択中のファイル」になります。これらのファイルそれぞれに対して、自分自身の開始位置と「つかんだファイル」の移動距離を足して、その位置に移動をさせています。
■ ドラッグ終了時の終了処理
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドはドラッグが終了した際に呼び出されます。ドラッグが終了したら、「つかんだファイル」のselectedFilesのメンバを削除します。
以上でソースコードの解説は終わりです。
ドラッグ&ドロップによるユーザビリティの向上を
今回はjQuery UIのドラッグ&ドロップ機能に注目し、個々の使い方を解説し、その後に、要素を複数選択してドラッグ&ドロップを行うサンプルについて解説しました。
サービスサイト、会員サイト、イントラネットなど、ユーザーにある程度長い時間、Webページ上で作業を行わせるようなサイトでは、ドラッグ&ドロップを利用することで作業効率をアップできるケースがあると思います。jQueryのドラッグ&ドロップ機能は非常にオプションが豊富でカスタマイズがしやすいので、きめ細かなアプリケーションの構築が可能です。ぜひチャンレンジしてみてください(参考:jQueryサンプル)。
また、今回は取り上げなかった、Sortable、Resizableも非常に便利です。これらも、気軽に導入し、ユーザービリティ向上に役立てることができるライブラリですので、ぜひ試してみてください。
今回のすべてのソースコードはこちらになります(サンプルのライセンスはGPL 2となります)。
著者紹介
プロフィール:志田 裕樹(しだ ゆうき)
株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
- 古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう - Ajax解体新書
よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう - ・第1回 Ajax技術の目に見えない通信内容をのぞいてみよう
- ・第2回 Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう
- ・第3回 Webアプリに使えるAjaxライブラリ8選!
- Ajax うきうき Watch・第1回 Webアプリのユーザビリティを改善しまくるAjax
- Ajax うきうき Watch・第2回 Ajax、それはWeb 2.0へと続く道
- Ajax うきうき Watch・第3回 どんなに無茶をやっても「それもありかな」なAjax
- Ajax うきうき Watch・第4回 自動車業界のAjaxを活用したキャンペーンを目撃せよ
- Ajax うきうき Watch・第5回 “どのブラウザでも動くAjax”を共有財産として育てよう
- Ajax うきうき Watch・第6回 プロプライエタリ2.0から考えるAjaxの公開/非公開部
- Ajax うきうき Watch・第7回 メモリリークが小さくなったGoogle Maps APIの新版
- Ajax うきうき Watch・第8回 “CGUI” 消費者が作り出すUIの時代突入
- Ajax うきうき Watch・第9回 巨大化するAjaxライブラリをシンプルにする新たな流れ
- Ajax うきうき Watch・第10回 地図のように年代を移動できるMITのAjax歴史年表
- Ajax うきうき Watch・第11回 JSONがRFCになり、どんどんこなれるAjaxサービス
- Ajax うきうき Watch・第12回 サーバが通信を開始できるComet活用Webチャット
- Ajax うきうき Watch・第13回 オンラインゲームで検索精度を上げるGoogleの巧みさ
- Ajax うきうき Watch・第14回 IE7とFirefox 2への利用者の大移動は起こるか?
- Ajax うきうき Watch・第15回 グーグル検索エンジンを特定ジャンル専用に、Co-op
- Ajax うきうき Watch・第16回 帯域やデバイス領域をフル活用させる“モバイルAjax”
- Ajax うきうき Watch・第17回 新しい技術を模索するYahoo!、Google、MS
- Ajax うきうき Watch・第18回 Ajaxの高度な使用例、Yahoo! pipes
- Ajax うきうき Watch・第19回 Apollo参戦でウィジェット開発者の争奪戦が激化
- Ajax うきうき Watch・第20回 Twitter登場で注目されるRTコミュニケーションツール
- Ajax うきうき Watch・第21回 過熱するTwitterブームとMicrosoftのマッシュアップ
- Ajax うきうき Watch・第22回 iPhoneのAjax戦略、そして今日もWeb APIは増加する
- Ajax うきうき Watch・第23回 Ajax開発者がヒーローになるとき、それはいま!
- Ajax うきうき Watch・第24回 携帯電話への拡張を進めるGoogleとWeb隠しコマンド
- Ajax うきうき Watch・第25回 Ajaxで加速!? エンタープライズ2.0とWebOSの普及
- Ajax うきうき Watch・第26回 「言葉」を超えた説得力を持つAjaxの存在感と広がり
- Ajax うきうき Watch・第27回 ゲームから読み解く、俺スクリプト時代の知的な挑戦
- Ajax うきうき Watch・第28回 マッシュアップ元年が終わり、2008年はどうなる?
- Ajax うきうき Watch・第29回 Twitterやクラウドへも分岐するAjax/Web APIの道
- Ajax うきうき Watch・第30回 Ajaxはじめて物語、そしてサーバでも動くJavaScript
- Ajax うきうき Watch・第31回 新ブラウザ戦争はon fireだがJavaScriptはoffのナゾ
- Ajax うきうき Watch・第32回 Google App EngineはAjaxへのハードルを下げるか?
- Ajax うきうき Watch・最終回 Pure JavaScriptの動画再生やRPGも好きでした
- JavaScriptプログラミング再入門
Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック - ・第1回 JavaScriptの復権
- ・第2回 JavaScriptの関数をマスターしよう
- ・第3回 JavaScriptにおける変数の宣言とスコープ
- ・最終回 JavaScriptでオブジェクト指向プログラミング