Skip to content

Instantly share code, notes, and snippets.

@Aymkdn

Aymkdn/popup_draggable.html

Last active April 27, 2019 04:45
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Aymkdn/35a7504031642211101e to your computer and use it in GitHub Desktop.
Save Aymkdn/35a7504031642211101e to your computer and use it in GitHub Desktop.
Download ZIP
Draggable DIV cross-browser (from IE8) with pure JavaScript
Raw
popup_draggable.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="popup" style="background-color:green;position:absolute;top:0px;left:0px;width:250px;height:250px;z-index:9999;box-shadow: 6px 6px 5px #888888;border-radius:6px;border:1px solid #4f4f4f;">
<div id="popup_bar" style="width:100%;background-color:#aaff66;position:relative;top:0;border-radius:6px 6px 0 0; text-align:center;height:24px;cursor:move">Title</div>
<p>Content of the popup</p>
</div>
</body>
<script>
!function() {
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;
if (document.releaseCapture) document.releaseCapture();
}, 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("popup"));
}();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment