var offsetX, offsetY, oDivNode;

// grab element
function grabElm(oEvent)
{
	if(!oEvent) oEvent = window.event;

	offsetX = oEvent.clientX - parseInt(oDivNode.style.left);
	offsetY = oEvent.clientY - parseInt(oDivNode.style.top);

	document.onmousemove = moveElm;
	document.onmouseup = releaseElm;

	if(oEvent.preventDefault) oEvent.preventDefault();
}

// move element
function moveElm(oEvent)
{
	if(!oEvent) oEvent = window.event;
	
	oDivNode.style.left = oEvent.clientX - offsetX + "px";
	oDivNode.style.top = oEvent.clientY - offsetY + "px";

	return false;
}

// release element
function releaseElm()
{
	// clear events
	document.onmousemove = document.onmouseup = null;
}

window.onload = function()
{
	oDivNode = document.getElementById("myDiv");
	oDivNode.style.left = "400px";
	oDivNode.style.top = "100px";	
	
	oDivNode.onmousedown = grabElm;
	
	document.body.appendChild(oDivNode);
}