← Back toHTML DOM

Make a draggable element

Written byPhuoc Nguyen
Level 3 — Advanced
03 Mar, 2020
Last updated
07 May, 2021
Assume that we want to turn the following element to draggable element:
<div id="dragMe" class="draggable">Drag me</div>
The element needs to have the following styles:
.draggable {
/* Indicate the element draggable */
cursor: move;

/* It will be positioned absolutely */
position: absolute;

/* Doesn't allow to select the content inside */
user-select: none;
In order to make it draggable, we need to handle three events:
  • `mousedown` on the element: Track the current position of mouse
  • `mousemove` on `document`: Calculate how far the mouse has been moved, and determine the position of element
  • `mouseup` on `document`: Remove the event handlers of `document`
// The current position of mouse
let x = 0;
let y = 0;

// Query the element
const ele = document.getElementById('dragMe');

// Handle the mousedown event
// that's triggered when user drags the element
const mouseDownHandler = function (e) {
// Get the current mouse position
x = e.clientX;
y = e.clientY;

// Attach the listeners to `document`
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);

const mouseMoveHandler = function (e) {
// How far the mouse has been moved
const dx = e.clientX - x;
const dy = e.clientY - y;

// Set the position of element
ele.style.top = `${ele.offsetTop + dy}px`;
ele.style.left = `${ele.offsetLeft + dx}px`;

// Reassign the position of mouse
x = e.clientX;
y = e.clientY;

const mouseUpHandler = function () {
// Remove the handlers of `mousemove` and `mouseup`
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);

ele.addEventListener('mousedown', mouseDownHandler);

Use cases

We can use the technique in this post to
  1. Create a range slider
  2. Create an image comparison slider
  3. Create resizable split views
  4. Drag to scroll
  5. Resize columns of a table


See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.
I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Recent posts ⚡

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn