jQuery UIで実現！ Ajaxで複数選択ドラッグ＆ドロップ（3/4） ─ ＠IT

[an error occurred while processing this directive]

連載一覧へ

パターンとライブラリで作るAjaxおいしいレシピ（5）

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

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

今回のサンプルの基本的な情報

　ここまででDraggables、Droppables、Selectablesの基本的な使い方が分かったと思いますので、いよいよここからは、応用編のサンプル解説をしていきます。もう一度サンプルを見てみましょう。

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

[an error occurred while processing this directive]

■ サンプルの基本設計

　このサンプルの基本設計は次のようになります（※下記リストはインデックスになっています）。

■ 複数要素のドラッグ

　ここで1つ難しいのは、複数ファイルが選択された場合のドラッグです。WindowsなどのOSが提供するファイルのドラッグでは、ファイルを複数選択し、その選択されたファイルのうち1つを「つかんで」移動すれば、選択されたファイルすべてが、マウスの動きにあわせて移動できます。しかし、jQueryのdraggable()は、「つかんだファイル」しか移動できません。

　ここでは、「つかんでいない選択ファイル」も移動する方法を別途実装しなければなりません。この課題に対して、今回は次のような手法を使いました（※下記リストはインデックスになっています）。

　このような方法のほかにもDraggablesのオプションhelperを使い、ドラッグ時は実際のファイルを動かさずに、新たに複数のファイルに対応するヘルパを作成しドラッグ時はそれを表示する、という方法もあるかもしれません。

■ サンプルのHTMLソース

　それでは、サンプルのHTMLソースを見てみます。まず今回読み込むライブラリは、次の8つのファイルです。

jquery-1.2.3.min.js
jquery.dimensions.js
ui.mouse.js
ui.draggable.js
ui.draggable.ext.js
ui.droppable.js
ui.droppable.ext.js
ui.selectable.js

　また9つ目として、今回のアプリケーションのために作成したファイル「filer.js」も読み込みます。ディレクトリやファイルに対応する部分のHTMLは、次のようになります。

<div id='filer'>

        <ul class='directory' id='directory1'>

          <li class='file'>file 1</li>

          <li class='file'>file 2</li>

          <li class='file'>file 3</li>

        </ul>

      

        <ul class='directory' id='directory2'>

          <li class='file'>file 4</li>

          <li class='file'>file 5</li>

          <li class='file'>file 6</li>

        </ul>

      </div>

　上記のように、<div id='filer'>の中に2つの<div class='directory'>があり、その下にそれぞれ3つの<div class='file'>が並ぶ構造になっています。

jQuery UIのテクニックがどのように使われたか

　次から、先ほど行った基本設計と対応させながら、部分的なコードを見ながら解説していきます。

　部分的に見て理解しやすいようにコードを一部変更してありますが、先に完全な形のソースコード全体を確認されたい場合は、こちらを参照してください。

■ ディレクトリをselectableにする

$('.directory').each(function() {

          $(this).selectable({

              selected:   onSelected,

              unselected: onUnselected

          });

      }

　この処理は、ページが読み込まれた際に一度だけ行われるディレクトリの初期化処理に当たります。ここでは、すべてのディレクトリに対して、selectable()を設定しています。onSelected、onUnselectedイベントハンドラについては後で解説します。

■ ディレクトリをdroppableにする

$('.directory').each(function() {

          $(this).droppable({

              hoverClass: 'ui-droppable-hover',

              accept:     isAccept,

              drop:       onDrop

          });

      });

　この処理も、ページが読み込まれた際に一度だけ行われるディレクトリの初期化処理に当たります。ファイルがディレクトリに重なった際に、「'ui-droppable-hover'」というCSSのクラスが付与されるようにしています。ドロップが可能な要素かどうかの判定にisAcceptという関数を指定しています。isAcceptの内容や、onDropイベントハンドラについては後述します。

　最後に次ページでは、引き続き今回紹介したテクニックがサンプルでどのように使われたか徹底解説して、さらに複数ファイルのドラッグの実装について話します。

1-2-3-4

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

[an error occurred while processing this directive]

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

[an error occurred while processing this directive] [an error occurred while processing this directive]