- - PR -
[JavaScript]範囲内でドラッグ&ドロップしたい
投稿者 | 投稿内容 | ||||||||
---|---|---|---|---|---|---|---|---|---|
|
投稿日時: 2006-08-01 19:34
お世話になります。
DIVのタグ部分をドラッグ&ドロップできるサンプルを改造して特定の範囲内だけ ドラッグ&ドロップできる様にしたいと考えています。 <DIV>タグをネストすれば親DIV内だけの移動になるかと考えて書いてみたのですが ドラッグ&ドロップ機能さえ動かなくなる始末で・・ <html> <head> <title>DragDrop Sample</title> <script type="text/javascript"> <!-- var obj; var offsetX; var offsetY; onload=function () { if (document.all) { objlist = document.all.tags("div"); //objlist = document.getElementsByTagName("div") //objlist = document.all("map"); //objlist = document.all.tags("div"); //objlist = document.getElementById("map"); } else if (document.getElementsByTagName) { objlist = document.getElementsByTagName("div"); } else { return; } for (i = 0; i < objlist.length; i++) { objlist[i].onmousedown = onMouseDown; } document.onmousemove = onMouseMove; document.onmouseup = onMouseUp; } function onMouseDown(e) { obj = this; if (document.all) { offsetX = event.offsetX + 2; offsetY = event.offsetY + 2; } else if (obj.getElementsByTagName) { offsetX = e.pageX - parseInt(obj.style.left); offsetY = e.pageY - parseInt(obj.style.top); } return false; } function onMouseMove(e) { if (!obj) { return true; } if (document.all) { obj.style.left = event.clientX - offsetX + document.body.scrollLeft; obj.style.top = event.clientY - offsetY + document.body.scrollTop; } else if (obj.getElementsByTagName) { obj.style.left = e.pageX - offsetX; obj.style.top = e.pageY - offsetY; } return false; } function onMouseUp(e) { obj = null; } --> </script> </head> <body> <div style="position:absolute; top:100px; left:200px; width:200px; height:50px; padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;"> Web Artisan Blog </div> </body> </html> 元 http://www.res-system.com/weblog/media/1/dragdrop.html | ||||||||
|
投稿日時: 2006-08-01 22:11
で、なんなん? 丸投げはやめようよ。せめて、自分が何をしたいのか、読んでいる人に何を頼みたいのかくらい書こうよ。 場所が場所なら、「見積書をお送りすればよろしいでしょうか」って、返ってくるよ。 | ||||||||
|
投稿日時: 2006-08-01 23:08
大ヒント↓(というか、まんまという気もするんですが)
IE6でもFireFoxでも動きましたよ。 試行錯誤していないですし、質問の仕方もおかしいですよね。 思わず書き込ませてしまうような上手い質問をしていただけ ないかと・・・。 次回は質問の趣旨が分かるようにしてください。 でないと見積書を送りますよ。 | ||||||||
|
投稿日時: 2006-08-02 10:46
質問の仕方がまずかったようで申し訳ありません。
<DIV ID="oya"> <DIV ID="ko"> </DIV> </DIV> このようなHTMLがあった場合oyaのDIV要素の範囲内だけの移動になるんじゃないかと想定しています。 (oyaの幅と高さを固定したとして) 上記のように書いて動かしてみたところドラッグ&ドロップの機能が動作しなくなりました。 document.all.tags("div")でDIVがoyaかkoか解らないのが原因かなと考え document.getElementByIdなどそれらしいものを試してみたのですが動作しません。 そもそもDIVをネストしたときの挙動の想定が間違っているでしょうか? | ||||||||
|
投稿日時: 2006-08-02 11:06
・・・動かない方のコードを載せるのがスジでしょ。
動かないコードのことまで人に考えさせるのは変でしょう。 | ||||||||
|
投稿日時: 2006-08-02 11:22
DIVの挙動の想定が間違っているのにサンプルに毛の生えたようなものを
乗せても見にくくなるかと思い躊躇してしまいました。失礼しました。 コメントアウトしてあるobjlist = document.all.tags("div")を有効にすると 親子両方いっしょに動きます。 現状のdocument.getElementById("mymap2")は動作しません。 objlistが値をとっていない為?正しい記述を調べております。 <html> <head> <title>DragDrop Sample</title> <script type="text/javascript"> <!-- var obj; var offsetX; var offsetY; onload=function () { if (document.all) { //objlist = document.all.tags("div"); objlist = document.getElementById("mymap2"); } else if (document.getElementsByTagName) { objlist = document.getElementsByTagName("div"); } else { return; } for (i = 0; i < objlist.length; i++) { objlist[i].onmousedown = onMouseDown; } document.onmousemove = onMouseMove; document.onmouseup = onMouseUp; } function onMouseDown(e) { obj = this; if (document.all) { offsetX = event.offsetX + 2; offsetY = event.offsetY + 2; } else if (obj.getElementsByTagName) { offsetX = e.pageX - parseInt(obj.style.left); offsetY = e.pageY - parseInt(obj.style.top); } return false; } function onMouseMove(e) { if (!obj) { return true; } if (document.all) { obj.style.left = event.clientX - offsetX + document.body.scrollLeft; obj.style.top = event.clientY - offsetY + document.body.scrollTop; } else if (obj.getElementsByTagName) { obj.style.left = e.pageX - offsetX; obj.style.top = e.pageY - offsetY; } return false; } function onMouseUp(e) { obj = null; } --> </script> </head> <body> <div id="mymap2" style="position:absolute; height: 2000px;width: 2000px;top:100px; left:200px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;"> <div id="mymap" style="position:absolute; top:100px; left:200px; label padding: 5px; border:1px #000000 solid; text-align: center; cursor: move; background-color: #eeeeee;"> test </div> </div> </body> </html> | ||||||||
|
投稿日時: 2006-08-02 12:03
という部分がありますが、IDタグで特定の要素を取得した場合取得 したオブジェクトは配列ではなく、そのDIVタグの要素自体が返されます。 alertで取得した値を比べるとわかると思います。
FireFoxで動かすとobjlistはHTMLDivElementと出てきますよ。 オブジェクトの配列では無い対象にループ処理しようとしている ので動かないんだと思います。 DIVの親子関係の話の前に、まずはドラッグできるようにしてみてください。 | ||||||||
|
投稿日時: 2006-08-02 12:12
document.all
は基本的にIEのものなので(Operaにもあるけど)、使わないほうがいいでしょう。 document.getElementById は、 document.getElement「s」ByTagName foo.childNode「s」 などと名前を良く比較してみれば分かる通り、単一のものが返るという話ですね。 というか、そもそもIDは単一のものを表すのにつける属性なので、それを拾おうとして複数返ってこられても困りますが。 |