Skip to content

Instantly share code, notes, and snippets.

@fjakobs

fjakobs/drag-ie.html

Created October 16, 2009 05:43
Show Gist options
  • Save fjakobs/211595 to your computer and use it in GitHub Desktop.
Save fjakobs/211595 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment