Lesson 05 ドラッグ＆ドロップでユーザビリティを向上 - Webデザイン表現&技法の新・スタンダード・インタラクション編

2011.5.11 WED

Webデザイン
表現&技法の
新・スタンダード

Lesson 5

ドラッグ＆ドロップで
ユーザビリティを向上

	制作・文	河原覚（株式会社アークフィリア）
＞	To Use	CSS \| JavaScript
＞	Browser	IE 6over \| Firefox 3over \| Safari 5over

Webアプリケーションの複雑化とともに、求められるUIもよりリッチなものになりつつある。ここではjQuery UIを用いてドラッグ＆ドロップを利用したショッピングカートのUIを作っていこう。

01

まずはjQuery とjQuery UI の読み込みだ。head 内にscript タグでjQuery →jQueryUIの順番で読み込まれるように記述しよう。続けて、ドラッグ&ドロップの機能を記述するためのdd.jsを読み込むようにする【1-1】。

【1-1】CSS,JavaScriptの読み込み

02

HTML+CSSで商品一覧とショッピングカートをつくる。ここにjQuery UI のdraggableとdroppableを利用して商品をかごにドラッグ&ドロップできるようにしていこう【2-1】【2-2】。

【2-1】商品一覧、ショッピングカートのHTML

【2-2】ショッピングカートの全体像

03

まずは商品のドラッグを設定する。商品一覧それぞれのliに対してdraggableメソッドを実行するだけだ。オプションとしてrevert とzIndexを指定【3-1】。revertを設定するとドラッグ中にマウスを放した際に元の位置に自動的に戻るようになる。zIndexはドラッグで移動中のz-indexを指定する。ある程度大きい値にして、移動中に他のパーツの下に隠れないようにしよう【3-2】。

【3-1】ドラッグの設定

【3-2】z-indexの設定により、移動中の要素が最前面に表示されている

04

続いてショッピングカートへのドロップを設定する。こちらもショッピングカート内に用意したul要素にdroppableメソッドを実行するだけだ。オプションを見ていこう。hoverClassはドラッグ中にショッピングカートにホバーした際に設定されるクラス名を指定できる。これによって表現を変え、ユーザーにドロップできる場所であることを示そう【4-1】【4-2】。

【4-1】ドロップ設定の開始。ドロップ中のホバー設定

【4-2】カートにホバーすると一段色が濃くなる

05

drop プロパティには実際にドロップされた際に実行されるコールバック関数を指定する【5-1】。第1 引数にはイベントオブジェクト、第2 引数にはui オブジェクトが渡される。ui オブジェクトはjQuery UIの各機能ごとに固有のオブジェクトだ。droppable の場合は、draggable,helper,position,offsetというプロパティが格納されている。それぞれ、イベント発生時点のドラッグされてきたエレメントのオリジナル、ヘルパーと呼ばれるドラッグされてきた表示上のエレメント、ヘルパーの表示位置、ヘルパーの表示位置オフセットだ。

【5-1】現在のスライドにフェードアウト、次のスライドにフェードインを設定して、タイトルを差し替える

06

次にドロップされた商品情報をショッピングカートに表示させるようにする。まずはui.draggable を参照し、ドロップされたエレメントのh2 から商品名を、codeNumクラスから商品番号を取得する。新たにliエレメントを生成し、取得した商品名や、商品番号に紐付いたサムネイル画像を含ませ、自身にアペンドする。これでドロップされた商品情報がショッピングカートに追加された【6-1】【6-2】。このままだと同じ商品を何度もドロップできてしまうので、一度ドロップした商品はドラッグできないようにする必要がある。ui.draggableにdraggable('disable')を設定するとドラッグ機能が一時的にオフになる。続くaddClassとfadeToによって半透明にし、ドラッグできないことを視覚的にわかりやすくする【6-3】【6-4】。DOMツリー構築後に処理させるため、全体を$(function(){と});で囲めば完成だ。