HTML Element をドラッグにより移動可能にする JavaScript ライブラリ

HTML Element (要素) をドラッグにより移動可能にする JavaScript ライブラリを作ってみました。

• Element をドラッグで移動可能にする JavaScript ライブラリ - ElementMover

技術的なこと

とまあそれだけじゃ面白くないのでドラッグに関してちょっとだけメモを。

要素をドラッグする、と言っても実際には 「ドラッグしている」 というイベントを検出しているわけではありません。 drag イベントというものもありますが、ここでやりたい 「画像などの要素をドラッグして移動する」 ということには使えないようです。 *1

実際に使用しているのは下記の 3 つのイベントです。

• mousedown イベント : ドラッグの開始
• mousemove イベント : ドラッグ中のマウスの移動
• mouseup イベント : ドラッグの終了

移動させたい要素に mousedown イベントを受け取るイベントリスナを追加しておき、ドラッグの開始を検出します。 また、ドラッグ中のマウスの移動は mousemove イベントの検出により検知します。 ただし、mousemove イベントを検出するイベントリスナは移動させる要素に追加するのではなく、document に追加します。 そうすることで、万一 JavaScript の処理が追いつかず移動させる要素からマウスポインタが外れてしまっても問題が起こらなくなります。 ドラッグの終了は mouseup イベントで検知します。 これを検出するイベントリスナも document に追加しておけばよいでしょう。

このように 3 つのイベントをそれぞれ処理するイベントリスナを組み合わせることで、ドラッグによる要素の移動を実現することができます。

*1:コメントでの指摘を受けて削除。 drag イベントを使用する方法もそのうち試してみたいと思います。