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

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

JavaScript・XHTML・CSS

2005年12月21日

アフィリエイトから企業サイト分析まで。訪問者の動きがまるわかりのアクセス解析サービス「リサーチアルチザンプロ」

LINEやSkypeみたいなビデオ通話がブラウザだけでできる!オンライン通話サービス「EZ-Interview - イージーインタビュー」

Ajaxを用いた”と謳うサービスには、
画面上のコントロールをドラッグアンドドロップできるものが多いです。

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

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

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

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

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

Web面接に最適。ブラウザだけでビデオ/音声通話ができるオンライン通話サービス。「EZ-Interview - イージーインタビュー」
訪問者録画機能も付いたシンプルで高機能なリアルタイムアクセス解析「リサーチアルチザンプロ」