戻る|
マウスのドラッグによる操作 |
◆マウスのドラッグによる操作◆ |
■■１■■
[概要]
ドラッグで動かせる画像（文字）を配置する
[参照]
[ソース]
<HTML>
<HEAD>
<TITLE>オブジェクトの移動</TITLE>
<SCRIPT type="text/javascript">
<!--
var obj;
var offsetX;
var offsetY;
//初期設定
function doInit() {
//オブジェクトのリスト
objlist = document.all.item("drag");
for (i = 0; i < objlist.length; i++) {
//オブジェクトをマウスが押した時
objlist[i].onmousedown = onMouseDown;
}
//マウスが動く時
document.onmousemove = onMouseMove;
//マウスボタンが離される時
document.onmouseup = onMouseUp;
}
//マウスを押した時
function onMouseDown(e) {
//オブジェクトの状態を変更
obj = this;
//位置取得
offsetX = event.offsetX;
offsetY = event.offsetY;
return false;
}
//マウスを動かした時
function onMouseMove(e) {
//何もない状態
if (!obj) {
return true;
}
//ドラッグ中
obj.style.left = event.clientX - offsetX + document.body.scrollLeft;
obj.style.top = event.clientY - offsetY + document.body.scrollTop;
return false;
}
//マウスを放したとき
function onMouseUp(e) {
obj = null;
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="doInit()">
<SPAN id="drag" STYLE="position:absolute; top:100; left:100; cursor:hand;">
<IMG SRC="img1.gif" ALT="img1.gif">
</SPAN>
<SPAN id="drag" STYLE="position:absolute; top:100; left:200; cursor:hand;">
<IMG SRC="img2.gif" ALT="img2.gif">
</SPAN>
<SPAN id="drag" STYLE="position:absolute; top:100; left:300; cursor:hand;">
ヨッシー
</SPAN>
<!--id="drag"を付けたタグ内にあるものは全て移動可。増やす時はid="drag"を付ければよい｡-->
</BODY>
</HTML>
※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。