Learn how to create a draggable HTML element with JavaScript and CSS
Creating a Draggable HTML Element
We will use JavaScript and CSS to allow users to drag a div around the page.
1. HTML: Create a Draggable Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create a Draggable HTML Element</title>
<style>
/* Styling the draggable element */
#mydiv {
position: absolute;
width: 200px;
height: 150px;
top: 50px;
left: 50px;
background-color: #f1f1f1;
border: 2px solid #2196F3;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
cursor: grab;
}
/* Header for dragging */
#mydivheader {
padding: 10px;
background-color: #2196F3;
color: #fff;
cursor: move;
font-weight: bold;
border-radius: 8px 8px 0 0;
}
</style>
</head>
<body>
<h2>Draggable DIV Element</h2>
<p>Click and hold the blue header to move the box.</p>
<div id="mydiv">
<div id="mydivheader">Click & Drag</div>
<p>Move this DIV</p>
</div>
<script>
// Function to enable dragging
function dragElement(element) {
const header = document.getElementById(element.id + "header");
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
// If there's a header, use it as the draggable area
if (header) {
header.onmousedown = dragMouseDown;
} else {
element.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
element.style.top = (element.offsetTop - pos2) + "px";
element.style.left = (element.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
// Activate dragging on #mydiv
dragElement(document.getElementById("mydiv"));
</script>
</body>
</html>
2. Explanation of Code
- The HTML contains a draggable
divwith a header as the dragging area. - The CSS ensures smooth dragging appearance with styling.
- The JavaScript function
dragElement()allows the user to:- Click & hold the header (
#mydivheader). - Move the box around by dragging the mouse.
- Release the mouse button to stop dragging.
- Click & hold the header (