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

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

JavaScript・XHTML・CSS (43 items)

2005年12月21日

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

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

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

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

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

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

前の記事 次の記事

Comments

つっち wrote:

はじめまして。ajaxのサンプルを探していて辿りつきました。
Drag&Dropのサンプル、多いに参考になりました。ありがとうございます！
2006年03月01日 18時14分20秒

ossi wrote:

つっちさん

お役に立てたようで。。
まあ、他サイトでも結構あるサンプルですので、今後はもうちょっとマシなサンプルを書いていけたらと思ってます。
2006年03月01日 22時00分43秒

hal* wrote:

んー、DOC宣言をして標準準拠モードにしたところFirefox1.5.0.4で動きませんでした。
Opera9とIE6では大丈夫でした。うーむ。。

でも大変参考になりました！ありがとうございます！
2006年07月27日 10時23分46秒

hal* wrote:

FF標準モードで動作しない件解決しました！
ソースコード中、マウスムーブの所でleftとtopのCSSプロパティを指定していますが、標準モードでは単位が必須の様です。

obj.style.left = e.pageX - offsetX;
↓
obj.style.left = e.pageX - offsetX + "px";
で動作しました☆
ということで早速使わせていただきます！ありがとうございましたぁ！
2006年07月27日 14時23分52秒

Add Comments

Trackback

ネットビジネス用CGI Perl HTML Javascriptの情報サイト wrote:

JavaScriptの配列:
　　複数の値をまとめて扱う場合に1〜2つ程度であれば前回の記事で説明したように変数を使用すれば問題ないとおもいます。 しかし扱うデータが100個になった場合はどうでしょう。 「変数を100個宣言して…」なんてしていてはとても大変です。 　　こんな時には通常は「配列」と呼ばれるものを使用します。 配列とは、複数の変数の集合を表わした変数のかたまりです。 配列も前回の記事の変数と同じように宣言してから使用しますが、配列を宣言するときは、変数の数（要素数）も一緒に指定します。 (要素数を初めに指定せず動的に配列のサイズを変更する事も可能です） また、配列の中の一つの変数に、アクセスする時は、要素番号を指定して各要素にアクセスします。
2006年03月13日 00時52分22秒

Trackback URL

http://www.res-system.com/weblog/action.php?action=plugin&name=TrackBack&tb_id=542