Web Artisan Blog - ウェブ アルチザン ブログ

JavaScriptでドラッグアンドドロップするサンプル

JavaScript・XHTML・CSS

2005年12月21日

Research Artisan Pro ←リサーチアルチザンがパワーアップして復活しました!!
Ajaxを用いた”と謳うサービスには、
画面上のコントロールをドラッグアンドドロップできるものが多いです。

で、そういう簡単なサンプルを作ってみました。
divタグで囲まれた部分をドラッグアンドドロップできます。
一応、IE6・Firefox、Operaなんかで検証済です。(Safari未検証)
>Drag&Dropサンプル
他サイトの色んなソースを参考にしましたが、
サンプルの感じがシンプルにまとまってる気がします。

この仕組みの一番の注意点としては、
divタグについて、absolute指定などで位置を固定しないといけないところです。
恐らく、この手の動作全てについて言える?ようですがね。。

JavaScript部分に関しては、ここでは細かい説明は省きます。
・・てか、私も詰めきれてないとこもありまして、
もうちょっと勉強してから改めて書きたいと思ってます。

ただこういうのできるとおもろいです。
このサンプルは、JavaScript・CSSとも外部ファイル化してませんので、
HTMLソースの表示で全てがわかります。
興味ある方は、サンプルのソースを色々いじってみて下さい。。

まあでも、来年以降はこういう動作が当たり前になってくるでしょうね。