Draggable Element Using JavaScript

Last Updated : 12 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Creating a draggable element and moving it to another place within the page is a very interactive and user-friendly concept that makes it easier for the user. This feature allows the user to click and hold the mouse button over a div, drag it to another location, and release the mouse button to drop the element.

Let us have a look at what the final feature will look like:

Screenshot-2025-03-10-165249
Draggable Elements

Approach

We will make this draggable feature to drag any element. Here is the step-by-step approach to creating a draggable element.

  • HTML Section: The HTML section of the page will be inside the index.html file, and we are only creating a div for this project. You can take any element to make it draggable.
  • CSS Section: This section will contain all the code related to the styling of the page or the div that we have taken for this project. The code of this file is given below.
  • JavaScript Section: This section handles JavaScript functions like onMouseDrag().

Example: Write the below code in the respective files.

HTML 
<html>
<head>
    <style>
        .draggable {
            width: 200px;
            height: 200px;
            margin: 10px;
            background-color: #f39c12;
            position: absolute;
            cursor: pointer;
            padding: 10px;
            border: 2px solid #333;
        }
    </style>
</head>
<body>

    <div id="div1" class="draggable" style="top: 50px; left: 50px;">Div 1</div>
    <div id="div2" class="draggable" style="top: 100px; left: 300px;">Div 2</div>
    <div id="div3" class="draggable" style="top: 200px; left: 500px;">Div 3</div>

    <script>
        const dragElements = document.querySelectorAll(".draggable"); 

        function onMouseDrag(event, element) {
            let leftValue = parseInt(window.getComputedStyle(element).left);
            let topValue = parseInt(window.getComputedStyle(element).top);
            element.style.left = `${leftValue + event.movementX}px`;
            element.style.top = `${topValue + event.movementY}px`;
        }

        dragElements.forEach((element) => {
            element.addEventListener("mousedown", (e) => {
                const onMove = (event) => onMouseDrag(event, element); 

                document.addEventListener("mousemove", onMove);
                document.addEventListener("mouseup", () => {
                    document.removeEventListener("mousemove", onMove);
                }, { once: true });
            });
        });
    </script>

</body>
</html>

Output:

In this example

  • The script selects all elements with the class .draggable using document.querySelectorAll(".draggable").
  • When you click on any .draggable element (mousedown event), the script begins tracking the mouse movement.
  • As you drag, the mousemove event updates the position of the dragged element by adjusting its left and top styles.
  • When you release the mouse button (mouseup event), the script stops moving the element by removing the mousemove event listener.
  • Each .draggable element is independently draggable, so clicking and dragging one element won’t affect others.

Next Article
script.aculo.us Sorting Elements

R
rahulkwh
Improve
Article Tags :

Similar Reads