JavaScript サンプル：『ドラッグできるメニューを作ってみる１』

コード

var bwType = null;
var trgObj = null;
var downFlag = false;
var overFlag = false;
var objPosX;
var objPosY;
var mousePosX;
var mousePosY;

function moveObj() {
	var posX = mousePosX - objPosX;
	var posY = mousePosY - objPosY;
	if ( bwType == 1 ) {
		trgObj.style.posLeft = posX;
		trgObj.style.posTop = posY;
	} else if ( bwType == 2 ) {
		trgObj.style.left = posX;
		trgObj.style.top = posY;
	} else {
		trgObj.moveTo( posX, posY );
	}
}

function mouseOver(e) {
	overFlag = true;
}

function mouseOut(e) {
	overFlag = false;
}

function mouseDown(e) {
	if ( overFlag ) {
		if ( bwType == 1 ) {
			objPosX = event.offsetX;
			objPosY = event.offsetY;
		} else {
			objPosX = e.layerX;
			objPosY = e.layerY;
		}
		downFlag = true;
	}
}

function mouseMove(e) {
	if ( downFlag ) {
		if ( bwType == 1 ) {
			mousePosX = document.body.scrollLeft + event.clientX;
			mousePosY = document.body.scrollTop + event.clientY;
		} else {
			mousePosX = e.pageX;
			mousePosY = e.pageY;
		}
		moveObj();
		return false;
	}
}

function mouseUp( e ) {
	if ( downFlag ) {
		downFlag = false;
	}
}

function bwCheck(){
	if ( document.all ) {
		return (1);
	} else if ( document.getElementById ) {
		return (2);
	} else if ( document.layers ) {
		return (3);
	} else {
		return (null);
	}
}

function formLoad( id ){
	bwType = bwCheck();
	switch ( bwType ) {
		case 1:
			trgObj = document.all( id );
			break;
		case 2:
			trgObj = document.getElementById( id );
			break;
		case 3:
			trgObj = document.layers[ id ];
			document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
			break;
		default:
			return;
	}
	document.onmousedown = mouseDown;
	document.onmouseup = mouseUp;
	document.onmousemove = mouseMove;
	trgObj.onmouseover = mouseOver;
	trgObj.onmouseout = mouseOut;
}

<BODY onLoad="formLoad( 'menu' )">
<SPAN id="menu" style="position:absolute;">
<TABLE width="200" border>
<TR><TD style="background-color: #ffffff;" align=center>
<A href="./h_all_top.html">Web覚書トップ</A><BR>
<A href="./h_all_hist.html">更新履歴</A><BR>
<A href="./h_js_top.html">JavaScriptサンプル</A><BR>
</TD></TR>
</TABLE>
</SPAN>

解説＆ステップアップ

ページの中で、マウスのダウン、アップ、移動、メニューの上の通過を取得します。
まず、メニューの上を通ったときに、通過フラグを立てて、通過フラグが立っているときにマウスがダウンすれば、メニューを掴んだと判断しています。そのときに掴みフラグを立てます。さらに、掴みフラグが立っている時に、マウスが移動させれば、メニューも移動させます。