- ベストアンサー
メニュー3つとも個々にドロップして移動したいのですが
メニュー3つとも個々にドロップして移動したいのですが、どのように すれば良いのでしょうか。 お願いします。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- //2つ適応 window.onload=function(){ flag = false; offx = 80; offy = 100; document.getElementById("menu1").onmousedown= function dragOn(){ flag = true;} window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; document.getElementById("menu1").style.top = event.y-offx; document.getElementById("menu1").style.left = event.x-offy; return false;} } // --></script> </head> <body> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> </body> </html>
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは event.x,event.yではFirefoxで動かなかったのでちょっと変えましたｍ（－－）ｍ <script type="text/javascript"><!-- window.onload=function(){ flag = false; Menu = new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++) { document.getElementById(Menu[i]).onmousedown= function dragOn(){ flag = true; target=this.id;} } window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx +"px"; document.getElementById(target).style.left = x-offy +"px"; return false;} } // --></script>
その他の回答 (1)
- HIRSYU
- ベストアンサー率51% (45/87)
提示したソースをできるだけ流用する形で作ってみました。 <html> <head> <title>ドラッグして画像を移動する</title> <script type="text/javascript"><!-- // ドラッグで動かす対象 var g_target; window.onload=function(){ flag = false; offx = 80; offy = 100; // 別途呼び出せるように，別の場所で定義 //document.getElementById("menu1").onmousedown= //function dragOn(){ flag = true; } window.document.onmousemove = dragImg; window.document.onmouseup = dragOff; function dragOff(){ flag = false; } function dragImg(){ if (!flag) return; // 動かす対象を移動させるように変更 g_target.style.top = event.y-offx; g_target.style.left = event.x-offy; return false; } } // ドラッグ開始 function dragOn(target){ // ドラッグで動かす対象を設定 g_target = target; flag = true; } // --></script> </head> <body> <!-- 各メニューで自分自身をドラッグ開始するように，関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" onMouseDown="dragOn(this);">メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" onMouseDown="dragOn(this);">メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;" onMouseDown="dragOn(this);">メニュー3</div> </body> </html>
お礼
ありがとうございました。 無事できました。 勉強になりました。
お礼
ありがとうございます。 勉強になります。 助かりました。