電子書籍の厳選無料作品が豊富！

メニュー3つとも個々にドロップして移動したいのですが

解決済

  • 質問者：mumu7777
  • 質問日時：
  • 回答数：2件

メニュー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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： leap_day
  • 回答日時：

こんにちは



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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
勉強になります。
助かりました。

通報する
お礼日時：2008/03/13 19:14

No.1

  • 回答者： HIRSYU
  • 回答日時：

提示したソースをできるだけ流用する形で作ってみました。


<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
無事できました。
勉強になりました。

通報する
お礼日時：2008/03/13 18:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報