Drag and Drop a Division Using Mouse in JavaScript: A Step-by-Step Guide to Creating Interactive Web Elements

3 min readOct 23, 2024

Introduction

Drag-and-drop interfaces are a staple of modern web applications, providing users with an intuitive way to interact with elements on a page. In this guide, we will walk through the process of creating a draggable div using plain JavaScript, enhancing the interactivity of your web projects. To create a draggable division (or div) using JavaScript, you can implement a simple drag-and-drop functionality by handling mouse events. Below is a step-by-step guide and example code to achieve this.

Step-by-Step Guide

HTML Setup: Create a div element that you want to be draggable.
CSS Styling: Style the div to make it visually distinct and set its position to absolute for easy movement.
JavaScript Logic: Implement the drag-and-drop functionality using mouse events (mousedown, mousemove, and mouseup).

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable DIV</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: absolute;
            cursor: move;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
<div id="draggable">Drag me!</div>
<script src="drag.js"></script>
</body>
</html>

JavaScript (drag.js)

const draggable = document.getElementById('draggable');
draggable.onmousedown = function(event) {
    let shiftX = event.clientX - draggable.getBoundingClientRect().left;
    let shiftY = event.clientY - draggable.getBoundingClientRect().top;
    draggable.style.position = 'absolute';
    draggable.style.zIndex = 1000;
    document.body.append(draggable);
    moveAt(event.pageX, event.pageY);
    function moveAt(pageX, pageY) {
        draggable.style.left = pageX - shiftX + 'px';
        draggable.style.top = pageY - shiftY + 'px';
    }
    function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);
    }
    document.addEventListener('mousemove', onMouseMove);
    draggable.onmouseup = function() {
        document.removeEventListener('mousemove', onMouseMove);
        draggable.onmouseup = null;
    };
};
draggable.ondragstart = function() {
    return false; // Prevent default drag behavior
};

Explanation

HTML:-
The div with the id draggable is styled to be easily movable and visually distinct.
CSS: -
The position: absolute style allows the div to be positioned anywhere within the viewport based on top and left properties.
JavaScript:-
The mousedown event is used to initiate the dragging process. It calculates the initial offset between the mouse pointer and the top-left corner of the div.
The mousemove event updates the position of the div as the mouse moves, keeping it under the cursor.
The mouseup event stops the dragging by removing the mousemove event listener.
The default drag behavior is prevented using ondragstart.

This code provides a basic implementation of drag-and-drop functionality using pure JavaScript and can be extended or modified for more complex scenarios, such as restricting movement within certain boundaries or adding additional visual feedback during dragging.

Github code Link:- https://github.com/mdshamsfiroz/Arth-4-Tasks/blob/main/FullStack/Task7.html

Output:-

So, whether you’re a tech enthusiast, a professional, or just someone who wants to learn more, I invite you to follow me on this journey. Subscribe to my blog and follow me on social media to stay in the loop and never miss a post.

Together, let’s explore the exciting world of technology and all it offers. I can’t wait to connect with you!”

Connect me on Social Media: https://linktr.ee/mdshamsfiroz

Happy coding! Happy learning!