Make it draggable!: 何でも動かせるようににする javascript

だい〜ぶ前に、JavaScript++かも日記: 【jsGadet】ドラッガブルフロートなDIV を見て、なんか汎用的な lib にならないかなと思って作っていた libDrag 。今回はこれを Bookmarklet から呼び出して、遊んでみました。

Drag!

これをブックマークバーなんかにドラッグしてみてください。他のページに行ってこのブックマークレットを起動すると、web ページ上の特定の部分（ポインタを乗せると赤い枠の出る部分）がマウスでぐりぐり動かせるようになります。また別の部分を動かしたいときは一度 ESC キーを押して下さい。また別の部分が動かせるようになります。

技術的な説明

僕は上の Bookmarklet を bootstrap と呼んでいます。なぜなら、この bookmarklet は launcher.js という他の javascript を呼び出すだけだからです。そして launcher.js はまず libDrag を読み込んで、Document に interaction を設定しています。

ソースを読めばわかると思いますけど、div タグのみを操作対象にしています。

既知の問題点

• Safari だと ESC キーの操作がうまく行かないなので、Firefox で試してみて下さい。
• 対象 div 上でクリックして、確認の dialog が出ている時にマウスポインタのフォーカスが離れると、うまく移動可能に出来ない。
• 複数個の div が入れ子状に存在する場合、一番外側の div しか移動可能に出来ない？
• 対象 div に border が設定されていた場合、設定を上書きしてしまう。

感想、などはコメントにどうぞ。