$('.file').draggable({ |
この処理は、ページが読み込まれた際に一度だけ行われるファイルの初期化処理に当たります。ここでは、全ファイルに対してdraggable()を設定しています。この際、ディレクトリの親要素である<div id='filer'>の範囲のみドラッグ可能となるようにしています。onStartDrag、onDrag、onStopDragイベントハンドラについては後で解説します。
ファイルは選択状態にならなければドラッグできないようにしますので、いったんdraggableを設定した後に、'disable'で無効化しています。
onSelected: function(e, ui) { |
これらのメソッドは、ファイルのドラッグによる選択を行ったときと、選択解除を行ったときに呼び出されます。onSelectedイベントハンドラ、onUnselectedイベントハンドラはそれぞれ下記2つの処理を行っています。
isAccept: function(draggable) { |
このメソッドはファイルをディレクトリの上に重ねた際に、そのファイルがディレクトリにドロップ可能かどうかを調べるために呼び出されます。このメソッドの中では、ドロップ前後のディレクトリを調べ、ドラッグ前に所属していたディレクトリと同一のディレクトリにドロップしていた場合は、ドロップできないようにしています。「get(0)」は配列の0番目を返すメソッドです。
onDrop: function(e, ui) { |
このメソッドはファイルをディレクトリにドロップした際に呼び出されます。ドロップ対象のディレクトリを取得し、すべての選択されたファイルをそのディレクトリ配下に入るようにします。その後、各ファイルの位置を初期化し、その後、選択をすべて解除し、ドラッグを無効化します。jQueryのメソッドチェーンのおかげですっきり書くことができますね。
最後に、複数ファイルのドラッグの実装について解説していきます。
onStartDrag: function(e, ui) { |
このメソッドはドラッグが開始される際に呼び出されます。まず以下の処理で、「つかんでいるファイル」を取得しています。
var helper = ui.helper.get(0); |
その後、以下の処理でそのファイルが所属しているディレクトリを取得します。
var parentId = $(helper).parent().get(0).id; |
そして、以下の処理では、セレクタ部分が、例えば、「#directory1 .ui-selected」といった文字列になるので、これでドラッグ対象となるすべてのファイルを選択できます。
helper.selectedFiles = $('#' + parentId + ' .ui-selected'); |
これらを、「つかんでいるファイル」のオブジェクトに、selectedFilesというプロパティとして保持させています。その後、ドラッグ対象となるすべてのファイルそれぞれに、開始位置を保持させています。
onDrag: function(e, ui) { |
このメソッドはドラッグ中に呼び出されます。最初に、現在の「つかんでいるファイル」の位置と開始位置の差を求め、移動距離を計算しています。
下記は、上記のコードの続き部分になります。
helper.selectedFiles.each(function() { |
「つかんでいるファイル」には、ドラッグ対象のファイルの配列である、selectedFilesというメンバが設定されていますので、このメンバが設定されていないファイルが、すなわち「つかんでいない選択中のファイル」になります。これらのファイルそれぞれに対して、自分自身の開始位置と「つかんだファイル」の移動距離を足して、その位置に移動をさせています。
onStopDrag: function(e, ui) { |
このメソッドはドラッグが終了した際に呼び出されます。ドラッグが終了したら、「つかんだファイル」の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.