第三の修練

マウスカーソルにmoveを指定した要素をドラッグ可能にする

というのを書いてみました。cssで{ cursor:move; position:absolute; top:YYpx; left:XXpx}を指定したものは全てドラッグ可能になるという、スタイルとスクリプトを関連付けるような邪悪な感じです。大分脆いので修正したい箇所がまだあるのですが、とりあえずでも公開しないと手をつけなそうなので公開します。

そもそも、要素をドラッグ可能にするライブラリが欲しくって色んなライブラリを見てみたのですが、（僕が見たものは）どのライブラリも要素への参照を引数にインスタンスを生成するタイプのもので、それの「要素数 ＝ インスタンス数」というのが何となく嫌で、回避する方法を考えているときに思いつきました。

仕組みは、document.bodyに対してイベントハンドラを設定するだけの簡単なものです。お行儀が悪いので、許せない人は許せないと思いますが、「ドラッグだけしたい！」なんてときにはサクッと対応できるので、個人的には楽で好きです。

デモ ソース

使い方は、ソースを読み込んで「Drag.enable();」です。ドラッグしたくない要素があれば、マウスカーソルにmove以外を指定してください。ドラッグ不可にしたいなら「Drag.disable();」です。でも本当に使いたい方は、ソースを読んで詳細を確認してください。

ちなみに、ドラッグのためのコードはこちらのページのものを参考にさせていただきました。ソースもシンプルで読みやすいし、JavaScriptでのドラッグ方法を知りたい人にはおすすめです。