travismillerweb/drag.html

## drag.html
<html>
<head>
<title> Drag Animation </title>

<script>
//Drag Functionality tutorial from JavaScript: The Difinitive Guide 6th Edition

function getScrollOffsets(w)
{
w = w || window;

if (w.pageXOffset != null) return {x:w.pageXOffset, y:w.pageYOffset}

var d = w.document;
if (document.compatMode == "CSS1Compat")
	return 	{ x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};

	return { w: d.body.scrollLeft, h: d.body.scrollTop };

}

function drag(elementToDrag, event)
{
	var scroll = getScrollOffsets();
	var startX = event.clientX + scroll.x;
	var startY = event.clientY + scroll.y;

	var origX = elementToDrag.offsetLeft;
	var origY = elementToDrag.offsetTop;

	var deltaX = startX - origX;
	var deltaY = startY - origY;

	if (document.addEventListener)
	{
		document.addEventListener("mousemove", moveHandler, true);
		document.addEventListener("mouseup", upHandler, true);
	}
	else if (document.attachEvent)
	{
		elementToDrag.setCapture();
		elementToDrag.attachEvent("onmousemove", moveHandler);
		elementToDrag.attachEvent("onmouseup", upHandler);

		elementToDrag.attachEvent("onlosecapture", upHandler);
	}

	if (event.stopPropogation) event.stopPropogation();
	else event.cancelBubble = true;

	if (event.preventDefault) event.preventDefault();
	else event.returnValue = false;


	function moveHandler(e)

	{
	if (!e) e = window.event;

	var scroll = getScrollOffsets();
	elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";
	elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px";

	if (e.stopPropogation) e.stopPropogation();
	else e.cancelBubble = true;
}

}

function upHandler (e)
{
	if (!e) e = window.event;

	if (document.removeEventLister)
	{
		document.removeEventLister("mouseup", upHandler, true);
		document.removeEventLister("mousemove", moveHandler, true);
	}
	else if (document.detachEvent)
	{
		elementToDrag.detachEvent("onlosecapture", upHandler);
		elementToDrag.detachEvent("onmouseup", upHandler);
		elementToDrag.detachEvent("onmousemove", moveHandler);
		elementToDrag.releaseCapture();

		if (e.stopPropogation) e.stopPropogation();
		else e.cancelBubble = true;
	}
}
</script>
</head>

<body>

<h1> Drag Animation </h1>

<div style = "position:absolute; left:100px; top:100px; width: 250px; background-color: white; border: solid black;">

<div style = "background-color:gray; border-bottom: dotted black; padding 3px; font-family: sans-serif; font-weight: bold;" onmousedown = "drag(this.parentNode, event);"> Drag Me </div>
<p>This is a test. Testing, testing, testing.</p><p>Test</p><p>Test</p>
</div>

</body>

</html>
	<html>
	<head>
	<title> Drag Animation </title>

	<script>
	//Drag Functionality tutorial from JavaScript: The Difinitive Guide 6th Edition

	function getScrollOffsets(w)
	{
	w = w \|\| window;

	if (w.pageXOffset != null) return {x:w.pageXOffset, y:w.pageYOffset}

	var d = w.document;
	if (document.compatMode == "CSS1Compat")
	return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop};

	return { w: d.body.scrollLeft, h: d.body.scrollTop };

	}

	function drag(elementToDrag, event)
	{
	var scroll = getScrollOffsets();
	var startX = event.clientX + scroll.x;
	var startY = event.clientY + scroll.y;

	var origX = elementToDrag.offsetLeft;
	var origY = elementToDrag.offsetTop;

	var deltaX = startX - origX;
	var deltaY = startY - origY;

	if (document.addEventListener)
	{
	document.addEventListener("mousemove", moveHandler, true);
	document.addEventListener("mouseup", upHandler, true);
	}
	else if (document.attachEvent)
	{
	elementToDrag.setCapture();
	elementToDrag.attachEvent("onmousemove", moveHandler);
	elementToDrag.attachEvent("onmouseup", upHandler);

	elementToDrag.attachEvent("onlosecapture", upHandler);
	}

	if (event.stopPropogation) event.stopPropogation();
	else event.cancelBubble = true;

	if (event.preventDefault) event.preventDefault();
	else event.returnValue = false;


	function moveHandler(e)

	{
	if (!e) e = window.event;

	var scroll = getScrollOffsets();
	elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";
	elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px";

	if (e.stopPropogation) e.stopPropogation();
	else e.cancelBubble = true;
	}

	}

	function upHandler (e)
	{
	if (!e) e = window.event;

	if (document.removeEventLister)
	{
	document.removeEventLister("mouseup", upHandler, true);
	document.removeEventLister("mousemove", moveHandler, true);
	}
	else if (document.detachEvent)
	{
	elementToDrag.detachEvent("onlosecapture", upHandler);
	elementToDrag.detachEvent("onmouseup", upHandler);
	elementToDrag.detachEvent("onmousemove", moveHandler);
	elementToDrag.releaseCapture();

	if (e.stopPropogation) e.stopPropogation();
	else e.cancelBubble = true;
	}
	}
	</script>
	</head>

	<body>

	<h1> Drag Animation </h1>

	<div style = "position:absolute; left:100px; top:100px; width: 250px; background-color: white; border: solid black;">

	<div style = "background-color:gray; border-bottom: dotted black; padding 3px; font-family: sans-serif; font-weight: bold;" onmousedown = "drag(this.parentNode, event);"> Drag Me </div>
	<p>This is a test. Testing, testing, testing.</p><p>Test</p><p>Test</p>
	</div>

	</body>

	</html>