ベストアンサー

DIV内のDIV要素を移動する。

2007/10/29 11:40

いつもお世話になります。 DIV内にDIVをいくつか作り、position:absolute; で、それぞれ位置を指定します。この、DIV内のDIVをマウスによりその位置を移動するにはどのようにしたらよいものでしょうか。 BODYタグ内のDIVについてのサンプルは、 http://jsm.suepon.com/script/jsm31.html に、わかりやすいものが掲載してありましたが、これを基にと思うのですが、行き詰まってしまいました。おわかりになる方見えましたら、どうかよろしくお願いします。

rqg2010
お礼率77% (283/364)

JavaScript
回答数5
ありがとう数3

回答全件

ベストアンサー

ええと、対策はわかりました。とりあえず、3の回答の後半部を以下のよ…

2007/10/29 19:30

すみません、下の回答、IEで不具合がありました。ただ、ちょっといま改修…

2007/10/29 18:11

> <div id="test1"> > <div id="test…

2007/10/29 17:50

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

susie-t
ベストアンサー率86% (37/43)

2007/10/29 19:30 回答No.5

ええと、対策はわかりました。とりあえず、3の回答の後半部を以下のようにしてください。 ------------------------------------ <style> div{ border:solid blue 2px;background-color:yellow; }; </style> </head> <body onload="init();"> <div id="test1" style="width:300px;height:300px;">TEST1 <div id="test2" style="width:200px;height:200px;">TEST2 <div id="test3" style="width:100px;height:100px;">TEST3 </div> </div> </div> </body> ------------------------------------ それぞれに幅・高さと背景色をつけただけですが。こうしないと、IEで、移動後にドラッグ可能な部分が文字のところだけになってしまいます。原因は・・・不明＾＾；これでご要望は満たせますでしょうか？

質問者

補足 2007/10/29 20:39

susie-tさん、ありがとうございます。いろいろ試していますが、susie-tさんの速度についていけません。すぐに、お返事できなくてすみません。改めて、お礼をさせていただきます。まずは、新たなアドバイスに対するお礼まで。

全文を見る

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

susie-t
ベストアンサー率86% (37/43)

2007/10/29 18:11 回答No.4

すみません、下の回答、IEで不具合がありました。ただ、ちょっといま改修する時間がないです。参考程度にしていただくか、改修までしばらくお待ちください・・・。バタバタして申し訳ないです。

質問者

補足 2007/10/29 18:27

No.3のお礼を申し上げて、その「お礼」の確認をしたら、新たにレスがありまして驚きました。私の方、いろいろと試すだけでも時間がかかっております。＞改修までしばらくお待ちください・・・。いつまでも待ちます。私も勉強させていただきます。どうも、ご丁寧にありがとうございます。

全文を見る

ログインすると、全ての回答が全文表示されます。

susie-t
ベストアンサー率86% (37/43)

2007/10/29 17:50 回答No.3

> <div id="test1"> > <div id="test2"> > 内の<div>タグをとなるとだとすると根本的にやり方を変えたほうがいいです。以下、サンプルです。要素IDを引数にしてmakeDraggable関数を呼び出すだけでOKです。場所は問いません。 ----------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head> <script> function getStyle(elem, IEStyleProp, CSSStyleProp){ if(elem.currentStyle){ return elem.currentStyle[IEStyleProp]; }else if(window.getComputedStyle){ var compStyle = window.getComputedStyle(elem, ""); return compStyle.getPropertyValue(CSSStyleProp); } } function pointerX(event) { return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); } function pointerY(event) { return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); } function stop(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } function makeDraggable(id){ var element = document.getElementById(id); var pos = getStyle(element, 'position', 'position'); if (pos == 'static' || !pos) { element.style.position = 'relative'; if (window.opera) { element.style.top = 0; element.style.left = 0; } } element.style.cursor = "pointer"; element.onmousedown = start; var dx = dy = 0; function start(event){ event = event || window.event; var x = getStyle(element, 'left', 'left'); var y = getStyle(element, 'top', 'top'); x = (!x || x == 'auto') ? 0 : parseInt(x); y = (!y || y == 'auto') ? 0 : parseInt(y); dx = pointerX(event) - x; dy = pointerY(event) - y; document.onmousemove = move; document.onmouseup = end; stop(event); } function move(event){ event = event || window.event; var x = parseInt(pointerX(event) - dx); var y = parseInt(pointerY(event) - dy); element.style.left = x + "px"; element.style.top = y + "px"; stop(event); } function end(){ document.onmousemove = null; document.onmouseup = null; stop(event); } } function init(){ makeDraggable("test1"); makeDraggable("test2"); makeDraggable("test3"); } </script> <style> div{border:solid blue 2px}; </style> </head> <body onload="init();"> <div id="test1">TEST1 <div id="test2">TEST2 <div id="test3">TEST3 </div> </div> </div> </body> </html>

質問者

お礼 2007/10/29 18:26

susie-tさん、ご丁寧なレスありがとうございます。早速試してみました。ともかく、凄そう。「こんなことできるんだ。」と、いった感想です。ありがとうございます。じっくりと、研究させていただきます。まずは、お礼まで。

全文を見る

ログインすると、全ての回答が全文表示されます。

susie-t
ベストアンサー率86% (37/43)

2007/10/29 16:24 回答No.2

申し訳ありません。再度コードを挙げます。この方法ではdocument.allは使用できないようなので、IEでも要素取得にdocument.getElementByIdを使用しました。このため、古いIEは対象外となります。 ---------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head> <script> N4 = GK = IE = obj = eoX = eoY = 0; if (document.layers) N4 = 1; else if (document.all) IE = 1; else if (document.getElementById) GK = 1; function init() { var test = null; if (N4) { list = document.layers; document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } else list = document.getElementById("test").getElementsByTagName("div"); for (i = 0; i < list.length; i ++) { if (N4) list[i].captureEvents(Event.MOUSEDOWN); list[i].onmousedown = down; } document.onmouseup = up; document.onmousemove = move; } function down(e) { obj = this; if (N4) { eoX = e.layerX; eoY = e.layerY; for (i in list) list[i].zIndex = 0; obj.zIndex = 1; } else if (GK) { eoX = e.pageX - parseInt(obj.style.left); eoY = e.pageY - parseInt(obj.style.top); } else if (IE) { eoX = event.clientX + document.body.scrollLeft - this.style.posLeft; eoY = event.clientY + document.body.scrollTop - this.style.posTop; } if (! N4) { for (i = 0; i < list.length; i ++) list[i].style.zIndex = 0; obj.style.zIndex = 1; } return false; } function move(e) { if (obj) { if (N4) obj.moveTo(e.pageX - eoX,e.pageY - eoY); else if (GK) { obj.style.left = (e.pageX - eoX) + "px"; obj.style.top = e.pageY - eoY + "px"; } else if (IE) { obj.style.left = (event.clientX + document.body.scrollLeft - eoX) + "px"; obj.style.top = (event.clientY + document.body.scrollTop - eoY) + "px"; } return false; } } function up(e) { obj = null; } onload = init; </script> </head> </body>  <div id="test"> <div style="position:absolute; left:50px; top:70px; z-index:0;"> <img src="xxx.gif"> </div> <div align=center style="width:150px; height:100px; border:double 3px black; position:absolute; left:250px; top:70px; z-index:0;"> <table height=100%><td> この文章と<br>左右の画像は<br>マウスで<br>移動できます </td></table> </div> <div style="position:absolute; left:450px; top:70px; z-index:0;"> <img src="yyy.gif"> </div> </div> </body> </html> ---------------------------------------------------- 失礼しました。

質問者

補足 2007/10/29 16:34

できました。ありがとうございます。最初の質問が言葉足らずだったんですが、 <div id="test"> 内の<div>は動作しますが、 <div id="test1"> <div id="test2"> 内の<div>タグをとなると親エレメントのオブジェクトを取得するのに else list = document.getElementById("test*").getElementsByTagName("div"); とかできないんですね。なにか良い方法はないものでしょうか。最初思ったようには動作しました。ありがとうございました。

全文を見る

ログインすると、全ての回答が全文表示されます。

susie-t
ベストアンサー率86% (37/43)

2007/10/29 15:09 回答No.1

外側のDIVのidを「test」とした場合の例。IE6、Firefox2で動作は確認しました。N4は環境がなく対応してません。(document.layersをtest.layers等で可能？) グローバル変数名offsetX、offsetYはFirefoxでwindowオブジェクトのプロパティとバッティングしてしまうので変更しています。 styleプロパティへの登録時、"px"等の単位をつけたほうがいいです。(Firefoxはそうでないと動作しません) 余談ですが、最近のIEならgetElementByIdに対応しているので、判定は不要な気がします。 ---------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head> <script> N4 = GK = IE = obj = eoX = eoY = 0; if (document.layers) N4 = 1; else if (document.all) IE = 1; else if (document.getElementById) GK = 1; alert(GK); function init() { var test = null; if (N4) { list = document.layers; document.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); } else if (GK) list = document.getElementById("test").getElementsByTagName("div"); else if (IE) list = document.all("test").tags("div"); for (i = 0; i < list.length; i ++) { if (N4) list[i].captureEvents(Event.MOUSEDOWN); list[i].onmousedown = down; } document.onmouseup = up; document.onmousemove = move; } function down(e) { obj = this; if (N4) { eoX = e.layerX; eoY = e.layerY; for (i in list) list[i].zIndex = 0; obj.zIndex = 1; } else if (GK) { eoX = e.pageX - parseInt(obj.style.left); eoY = e.pageY - parseInt(obj.style.top); } else if (IE) { eoX = event.clientX + document.body.scrollLeft - this.style.posLeft eoY = event.clientY + document.body.scrollTop - this.style.posTop } if (! N4) { for (i = 0; i < list.length; i ++) list[i].style.zIndex = 0; obj.style.zIndex = 1; } return false; } function move(e) { if (obj) { if (N4) obj.moveTo(e.pageX - eoX,e.pageY - eoY); else if (GK) { obj.style.left = (e.pageX - eoX) + "px"; obj.style.top = e.pageY - eoY + "px"; } else if (IE) { obj.style.left = (event.clientX + document.body.scrollLeft - eoX) + "px";; obj.style.top = (event.clientY + document.body.scrollTop - eoY) + "px";; } return false; } } function up(e) { obj = null; } onload = init; </script>  <div id="test"> <div style="position:absolute; left:50px; top:70px; z-index:0;"> <img src="xxx.gif"> </div> <div align=center style="width:150px; height:100px; border:double 3px black; position:absolute; left:250px; top:70px; z-index:0;"> <table height=100%><td> この文章と<br>左右の画像は<br>マウスで<br>移動できます </td></table> </div> <div style="position:absolute; left:450px; top:70px; z-index:0;"> <img src="yyy.gif"> </div> </div> </body> </html>

質問者

お礼 2007/10/29 15:59

susie-tさん、早速レスありがとうございます。ご丁寧にスクリプトまで記載していただきありがとうございます。しかし、残念ながら、動作しません。 </script> の次に </head> <body> を入れてみました。 IE６を主に使用していますので、 alert(GK); を alert(IE); と、してみました。１が表示されます。その他、細部のチェックはしていません。これから、細部について見させていただきます。まずは、お礼まで。ありがとうございました。

質問者

補足 2007/10/30 10:27

補足にてお礼させていただきます。イベントについていまいち理解していないところがあり、これから勉強していきます。 susie-tさんよりのアドバイスは、とてもわかりやすかったです。どうもありがとうございました。

全文を見る

ログインすると、全ての回答が全文表示されます。

DIV内のDIV要素を移動する。