フロントエンド開発Blog

オレには鈍器がある

JavaScript , UI , draggable

[jQuery] ドラッガブルなモーダルです

概要:
・マウスで位置を変動させることができます
・IE6でも動作します

http://jsdo.it/oredon/8e2i

モーダルウィンドウ(lightbox的なUI)はちょくちょくいろんなサイトで見られますが、ドラッガブルなウィンドウはそこまで多くはないと思います。

というのも、要素をわざわざドラッガブルにするには「ドラッガブルにすることでユーザの操作性が向上する」というありそうであまりないシチュエーションでしか実装されることがないからです。

例えば・・・ですがかるく考えてみます。

10個20個くらいの要素をグラフィカルにユーザの任意にグルーピングさせたいコンテンツ、とかだとドラッガブルは直感的かもしれません。これはいろんなWEBサービスでも見られますし、普段使いのデスクトップのフォルダ分けのような「既存のユーザ体験に基づいた」UIということもあって割といい見せ方だと思います

対して今回のようなドラッガブルなモーダル、となるとどうでしょうか。モーダルの地面にある記述との見比べに有意性があって、限られた解像度PCでもウィンドウを動かすことで視界を確保するという狙いがまず考えられるかなと思います。ただ、これはあまりgoodな方法ではないと私見ながら思います。そもそも見比べが必要ならわざわざモーダルを採用せずに画面設計をやり直した方が良いことのほうが多いと思います。

実装しておいて何ですが、「ドラッガブル自体は有効なUI手法ではなるが、それをわざわざモーダルに適用するのは少々乱暴」と思います。

そんなこんなで散々な言いようでしたが、まぁドラッガブル要素の作り方の一つとして見てやっていただければと思います。

また、jQuery-UIというプラグインに既にドラッガブル機能がありますが、IE6では処理が非常に重たくメモリリークも激しかったためあえて自作したという経緯があります。ありものがあったとしても安易に使用せず、パフォーマンスや拡張性を懸念して自作することも視野に入れて物作りをしたいものですね。

ページトップへ

関連ページ

ページトップへ