fjakobs/drag-ie.html

## drag-ie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="author" content="Fabian Jakobs">
	<!-- Date: 2009-10-15 -->

	<style type="text/css" media="screen">

	   #drag {
	       position: absolute;
	       width: 250px;
	       height: 70px;
	       background-color: orange;
	       padding: 20px;
	       font: 4em sans-serif;
	       cursor: move;
	   }

	</style>
</head>
<body>

<div id="drag" style="left:50px; top: 100px">
    drag me
</div>

<script type="text/javascript" charset="utf-8">

function addListener(element, type, callback) {
    if (element.addEventListener) {
        element.addEventListener(type, callback, false);
    } else {
        element.attachEvent("on" + type, callback);
    }
}

function draggable(element) {
    var dragging = null;

    addListener(element, "mousedown", function() {
        var e = window.event;
        dragging = {
            mouseX: e.clientX,
            mouseY: e.clientY,
            startX: parseInt(element.style.left),
            startY: parseInt(element.style.top)
        };
        element.setCapture();
    });

    addListener(element, "losecapture", function() {
        dragging = null;
    });

    addListener(element, "mousemove", function() {
        if (!dragging) return;

        var e = window.event;
        var top = dragging.startY + (e.clientY - dragging.mouseY);
        var left = dragging.startX + (e.clientX - dragging.mouseX);

        element.style.top = (Math.max(0, top)) + "px";
        element.style.left = (Math.max(0, left)) + "px";
    });
};

draggable(document.getElementById("drag"));
</script>

</body>
</html>

## drag.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="author" content="Fabian Jakobs">
	<!-- Date: 2009-10-15 -->

	<style type="text/css" media="screen">

	   #drag {
	       position: absolute;
	       width: 250px;
	       background-color: orange;
	       padding: 20px;
	       font: 4em sans-serif;
	       cursor: move;
	   }

	</style>
</head>
<body>

<div id="drag" style="left:50px; top: 100px">
    drag me
</div>

<script type="text/javascript" charset="utf-8">

function addListener(element, type, callback, capture) {
    if (element.addEventListener) {
        element.addEventListener(type, callback, capture);
    } else {
        element.attachEvent("on" + type, callback);
    }
}

function draggable(element) {
    var dragging = null;

    addListener(element, "mousedown", function(e) {
        var e = window.event || e;
        dragging = {
            mouseX: e.clientX,
            mouseY: e.clientY,
            startX: parseInt(element.style.left),
            startY: parseInt(element.style.top)
        };
        if (element.setCapture) element.setCapture();
    });

    addListener(element, "losecapture", function() {
        dragging = null;
    });

    addListener(document, "mouseup", function() {
        dragging = null;
    }, true);

    var dragTarget = element.setCapture ? element : document;

    addListener(dragTarget, "mousemove", function(e) {
        if (!dragging) return;

        var e = window.event || e;
        var top = dragging.startY + (e.clientY - dragging.mouseY);
        var left = dragging.startX + (e.clientX - dragging.mouseX);

        element.style.top = (Math.max(0, top)) + "px";
        element.style.left = (Math.max(0, left)) + "px";
    }, true);
};

draggable(document.getElementById("drag"));
</script>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

	<html lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="author" content="Fabian Jakobs">
	<!-- Date: 2009-10-15 -->

	<style type="text/css" media="screen">

	#drag {
	position: absolute;
	width: 250px;
	height: 70px;
	background-color: orange;
	padding: 20px;
	font: 4em sans-serif;
	cursor: move;
	}

	</style>
	</head>
	<body>

	<div id="drag" style="left:50px; top: 100px">
	drag me
	</div>

	<script type="text/javascript" charset="utf-8">

	function addListener(element, type, callback) {
	if (element.addEventListener) {
	element.addEventListener(type, callback, false);
	} else {
	element.attachEvent("on" + type, callback);
	}
	}

	function draggable(element) {
	var dragging = null;

	addListener(element, "mousedown", function() {
	var e = window.event;
	dragging = {
	mouseX: e.clientX,
	mouseY: e.clientY,
	startX: parseInt(element.style.left),
	startY: parseInt(element.style.top)
	};
	element.setCapture();
	});

	addListener(element, "losecapture", function() {
	dragging = null;
	});

	addListener(element, "mousemove", function() {
	if (!dragging) return;

	var e = window.event;
	var top = dragging.startY + (e.clientY - dragging.mouseY);
	var left = dragging.startX + (e.clientX - dragging.mouseX);

	element.style.top = (Math.max(0, top)) + "px";
	element.style.left = (Math.max(0, left)) + "px";
	});
	};

	draggable(document.getElementById("drag"));
	</script>

	</body>
	</html>