ＪＡＶＡスクリプトを使って、マウスで文字や画像をドラッグ出来るようにするためには、マウスカーソルの動きや位置をＪＡＶＡスクリプトで扱えるようにする必要があります。
マウスカーソルを動かすと、画面上のその位置、ｌｅｆｔ（ｘ座標）とｔｏｐ（ｙ座標）を表示します。
このソースは、
<html>
<head>
<script language="JavaScript">
<!--
var x1,y1;
function zahyou() {
x1 = event.clientX + document.body.scrollLeft;
y1 = event.clientY + document.body.scrollTop;
mx.innerText = "マウスカーソルの位置、ｌｅｆｔ（ｘ座標）は？" + x1;
my.innerText = "マウスカーソルの位置、ｔｏｐ（ｙ座標）は？" + y1;
}
document.onmousemove = zahyou;
//-->
</script>
</head>
<body>
マウスカーソルを動かすと、画面上のその位置、ｌｅｆｔ（ｘ座標）とｔｏｐ（ｙ座標）を表示します。<br>
<div id=" mx"></div>
<div id=" my"></div>
</body>
</html>
|
ＪＡＶＡスクリプトから見ていきましょう。
まず、
zahyou()という、関数があります。
そして、その関数の次に、
document.onmousemove = zahyou;と、書かれています。
これは、マウスカーソルが移動したら、
zahyou()を、実行すると言う意味です。
()は、書きません。（
参照、マウスボタンイベント）
◆
では、
zahyou()の中身を見ていきましょう。
まず、
x1 = event.clientX + document.body.scrollLeft;です。
event.clientXというのは、マウスカーソルが、ＨＰが表示されている画面の左端から、何ピクセルのところにあるのかという、マウスカーソルの横の位置を示しています。
そして、その後ろに書かれている
document.body.scrollLeftと言うのは、画面が横方向にスクロールした場合の、どれだけスクロールしたかを示しています。
これを足しておくと、マウスカーソルの横方向の現在位置＋スクロールした量で、スタイルシートの
position:absoluteで使用する”ｌｅｆｔ”の値を計算できます。
y1 = event.clientY + document.body.scrollTopも、同じように、ＨＰを表示している画面の上からの位置と（
event.clientY）、上下方向にスクロールした量（
document.body.scrollTop）を足して、同じくｔｏｐの位置を計算しています。
◆
そして、ｌｅｆｔの位置とｔｏｐの位置をそれぞれ表示させます。
mx.innerText = "マウスカーソルの位置、ｌｅｆｔ（ｘ座標）は？" + x1;
my.innerText = "マウスカーソルの位置、ｔｏｐ（ｙ座標）は？" + y1;
innerTextについては、
こちらを参照してください。
ここでは、計算したｌｅｆｔとｔｏｐの値（
x1とy1）をＨＰ上に表示させているのです。
◆
このように、マウスカーソルが動くと、
zahyou()が実行され、マウスカーソルの位置を計算して、ＨＰ上に表示しています。
次回は、このようにして計算できるマウスカーソルの位置に合わせて画像や文字を移動させて見ましょう。