| ポイント |
<![CDATA[
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(n){ flag = true; iName = n; }
function dragOff(){ flag = false; }
function dragImg()
{
if (!flag) return;
document.images[iName].style.top = event.y - offy;
document.images[iName].style.left = event.x - offx;
return false;
}
]]>
|
| 説 明 |
画像をドラッグするにはonmousedown、onmouseup、onmousemoveイベントを設定します。画像の上でマウスが押されたら、押された画像名を変数に代入します。この時にドラッグ中であるフラグ変数を設定しonmousemoveイベントが発生している間画像を移動させます。マウス座標はevent.x、event.yで取得しスタイルシートプロパティ(top、left)に代入します。マウスが離されたらフラグ変数をオフにします。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>ドラッグして画像を移動する</title>
<script language="JavaScript"><!--
flag = false;
offx = 64 / 2;
offy = 48 / 2;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(n){ flag = true; iName = n; }
function dragOff(){ flag = false; }
function dragImg()
{
if (!flag) return;
document.images[iName].style.top = event.y - offy;
document.images[iName].style.left = event.x - offx;
return false;
}
// --></script>
</head>
<body>
<img src="image.jpg" name="myIMG1" style="position:absolute" onMousedown="dragOn('myIMG1')">
<img src="image.jpg" name="myIMG2" style="position:absolute" onMousedown="dragOn('myIMG2')">
<img src="image.jpg" name="myIMG3" style="position:absolute" onMousedown="dragOn('myIMG3')">
<img src="image.jpg" name="myIMG4" style="position:absolute" onMousedown="dragOn('myIMG4')">
<img src="image.jpg" name="myIMG5" style="position:absolute" onMousedown="dragOn('myIMG5')">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
ドラッグして画像を移動する