左のボールをマウスでドラッグしてください。
ボールをマウスでズルズルと引きずる（ドラッグ）することができるのです。マウスボタンを離せば、その位置にボールを置くことができます。JavaScriptでもこんなことができるのです。
ここでは、オブジェクトをドラッグする方法を実験します。オブジェクトとして爆弾ゲームで使った爆弾（ボール）をドラッグできるようにしましょう。
なお、ブラウザはWindows用のIE4.0以降、NN4.0以降を目指しています。・・・が、IE6、NN7しか確認できていません。NNでは少々おかしな動きをすることもありますが、勘弁してください。。。
以前に、画像をウィンドウの自由な位置にスクリプトで移動させる実験を行いました。（爆弾投下ゲーム、爆弾発射ゲーム、ヨーヨーの実験など参照）
また、マウスポインタの位置情報の取得も実験しました。（マウスポインタ座標表示など）
この二つを組み合わせれば、オブジェクトをドラッグできるのではないか・・・ということで以下のような実験をしました。
function drag() {
document.getElementById("Ball").style.left = event.x;
document.getElementById("Ball").style.top = event.y;
}
document.onmousemove = drag;
var DragFlg = 0;
function dragStart() {
DragFlg = 1;
}
function dragEnd() {
DragFlg = 0;
}
function drag() {
if (DragFlg == 0) return;
document.getElementById("Ball").style.left = event.x;
document.getElementById("Ball").style.top = event.y;
return false;
}
document.onmousedown = dragStart;
document.onmouseup = dragEnd;
document.onmousemove = drag;
var DragFlg = 0;
var DragX;
var DragY;
function dragOn() {
DragFlg = 1;
}
function dragStart() {
DragX = event.x - document.getElementById("Ball").style.pixelLeft;
DragY = event.y - document.getElementById("Ball").style.pixelTop;
}
function dragEnd() {
DragFlg = 0;
}
function drag() {
if (DragFlg == 0) return;
document.getElementById("Ball").style.left = event.x - DragX;
document.getElementById("Ball").style.top = event.y - DragY;
return false;
}
document.onmousedown = dragStart;
document.onmouseup = dragEnd;
document.onmousemove = drag;