マウスでドラッグ可能なフローティングボックス

動くサンプルはこちら。HTMLとJSは、以下です。

まず、フローティングボックス用のHTMLを作成します。全体をID名がfloatboxのDIVとして、タイトル部分をクラス名がhandleのDIV、コンテンツ部分をクラス名がmessageのDIVとしています。タイトル部分は、ユーザーがドラックするために使うハンドルの役割を示すので、handleと名づけました。CSSは、大体ご覧いただいた通りです。コメントした部分もご確認下さい。

JSは、(1)変数定義、(2)関数定義、(3)イベント設定と3つに大きく分かれています。イベント設定の最初では、ハンドル部分に対するイベントを設定しています。イベントmousedownで、mousedown関数を呼び出しています。mousedown関数内では、マウスダウンされた場所とフローティングボックスの左上のずれをleftDiff(横方向のズレ)とtopDiff(縦方向のずれ)に格納しています。そして、ドキュメント(doc)のmousemoveイベントに対して、moving関数を仕掛けています。また、ドキュメントのmouseupイベントに対して、dragEnd関数も仕掛けています。何故、handleではなく、ドキュメントに仕掛けるのか?と思うと思いますが、handleでも動作はするのですが、もしマウスを素早くサッと動かして、handleから外れてしまうと、マウス関係のイベントがhandleで捉えられなくなってしまうので、ドキュメントに対してしています。バブリングにより、ドキュメントでもイベントを捉えられます。

そして、肝心のmoving関数内では、最新のマウスの座標に先ほど計算したずれを修正したleftとtop値で、floatboxの位置を設定しています。ついでに、移動中は少し透明にしています。dragEnd関数内では、ドラッグが終了したので、ドキュメントに対するmousemoveとmouseupイベントの設定を解除しています。そうでないと、いつまでも動き続けてしまいます。また、透明度を解除しています。以上が大枠ですが、最後に2つ程、フローティングボックスの表示・非表示用のイベントを設定しています。これは、見ての通りなので説明は省略します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です