Drag and Drop with JavaScript

The Drag and Drop API allows users to drag elements on a webpage and drop them into different locations. It's useful for file uploads, reordering lists, and interactive interfaces.

1️⃣ Basic Drag and Drop Events

The Drag and Drop API provides the following events:

Event	Description
`dragstart`	Fires when dragging starts
`drag`	Fires when the element is being dragged
`dragend`	Fires when dragging stops
`dragenter`	Fires when the dragged element enters a valid drop target
`dragover`	Fires when the element is being dragged over a valid drop target
`dragleave`	Fires when the dragged element leaves a drop target
`drop`	Fires when the dragged element is dropped

2️⃣ Basic Example: Dragging an Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Example</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: grab;
            user-select: none;
        }

        #dropzone {
            width: 200px;
            height: 200px;
            border: 2px dashed black;
            text-align: center;
            line-height: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div id="draggable" draggable="true">Drag me</div>
    <div id="dropzone">Drop here</div>

    <script>
        let draggable = document.getElementById("draggable");
        let dropzone = document.getElementById("dropzone");

        // Start dragging
        draggable.addEventListener("dragstart", (event) => {
            event.dataTransfer.setData("text/plain", event.target.id);
            event.target.style.opacity = "0.5";
        });

        // While dragging
        draggable.addEventListener("dragend", (event) => {
            event.target.style.opacity = "1";
        });

        // Allow dropping
        dropzone.addEventListener("dragover", (event) => {
            event.preventDefault(); // Required to allow dropping
            dropzone.style.backgroundColor = "lightgray";
        });

        // Leave drop area
        dropzone.addEventListener("dragleave", () => {
            dropzone.style.backgroundColor = "";
        });

        // Drop element
        dropzone.addEventListener("drop", (event) => {
            event.preventDefault();
            let draggedElementId = event.dataTransfer.getData("text/plain");
            let draggedElement = document.getElementById(draggedElementId);
            dropzone.appendChild(draggedElement);
            dropzone.style.backgroundColor = "";
        });
    </script>

</body>
</html>

✅ Drag the blue box into the dashed drop area!

3️⃣ Dragging Multiple Elements

If you have multiple draggable elements, use event.target.

<div class="draggable" draggable="true">Item 1</div>
<div class="draggable" draggable="true">Item 2</div>
<div class="draggable" draggable="true">Item 3</div>

<script>
    let draggables = document.querySelectorAll(".draggable");

    draggables.forEach(item => {
        item.addEventListener("dragstart", (event) => {
            event.dataTransfer.setData("text/plain", event.target.textContent);
        });

        item.addEventListener("dragend", () => {
            console.log("Drag ended");
        });
    });
</script>

✅ Each draggable element can be moved separately.

4️⃣ Drag and Drop Files

This is useful for uploading files.

<input type="file" id="fileInput" hidden />
<div id="dropzone">Drop files here</div>

<script>
    let dropzone = document.getElementById("dropzone");

    dropzone.addEventListener("dragover", (event) => {
        event.preventDefault();
        dropzone.style.backgroundColor = "lightblue";
    });

    dropzone.addEventListener("dragleave", () => {
        dropzone.style.backgroundColor = "";
    });

    dropzone.addEventListener("drop", (event) => {
        event.preventDefault();
        let files = event.dataTransfer.files;
        console.log("Files dropped:", files);
        dropzone.style.backgroundColor = "";
    });
</script>

✅ Dragging files over the drop zone will log the files in the console.

🔹 Summary

✔ dragstart and drop handle dragging elements.
✔ event.dataTransfer stores dragged data.
✔ event.preventDefault() allows dropping.
✔ You can drag and drop files into a page.

🚀 Need a more advanced example? Let me know!

Souy Soeng

Drag and Drop with JavaScript

Drag and Drop with JavaScript

1️⃣ Basic Drag and Drop Events

2️⃣ Basic Example: Dragging an Element

3️⃣ Dragging Multiple Elements

4️⃣ Drag and Drop Files

🔹 Summary

Post a Comment

Souy Soeng