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
div
with 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 (