| 解 説 |
画像をドラッグするにはマウスボタンが画像の上で押されている間、画像をマウスに追従するようにします。マウス座標はevent.x, event.yで取得します。ただマウス座標に追従させた場合、最初にクリックした位置とドラッグ開始／中の位置がずれてしまう事があります。このため最初に画像をクリックした位置と画像の座標の座分をドラッグ開始時に求めておき、ドラッグ中に得られた差分を減算します。
|
| コード |
<![CDATA[
<html>
<head>
<title>画像をドラッグする</title>
<script language="JavaScript"><!--
flag = false;
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
function dragOn(n)
{
flag = true;
iName = n;
offx = event.x - document.images[iName].style.pixelLeft;
offy = event.y - document.images[iName].style.pixelTop;
}
function dragOff(){ flag = false; }
function dragImg()
{
if (!flag) return;
document.images[iName].style.pixelTop = event.y - offy;
document.images[iName].style.pixelLeft = event.x - offx;
return false;
}
// --></script>
</head>
<body>
<img src="image.gif" name="myIMG1" style="position:absolute;top:10px;left:10px;" onMousedown="dragOn('myIMG1')">
<img src="image.gif" name="myIMG2" style="position:absolute;top:50px;left:10px;" onMousedown="dragOn('myIMG2')">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
画像をドラッグする