|
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