HTML Drag and Drop - Complete HTML Tutorial

🖱️ What is Drag and Drop?

The Drag and Drop API allows users to drag elements around the page and drop them in different locations. It's great for interactive interfaces like file uploads and sortable lists.


<!-- Simple drag and drop example -->
<div id="drag1" draggable="true" ondragstart="drag(event)">
    Drag me!
</div>

<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)">
    Drop here
</div>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Drag and Drop Events

🎯

dragstart

When dragging begins

ondragstart="drag(event)"

🔄

dragover

While dragging over target

ondragover="allowDrop(event)"

📥

drop

When element is dropped

ondrop="drop(event)"

✋

draggable

Makes element draggable

draggable="true"

🔹 Complete Drag and Drop Example

Here's a working drag and drop example:

<!DOCTYPE html>
<html>
<head>
<style>
.drag-item {
    width: 100px;
    height: 50px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 50px;
    margin: 10px;
    cursor: move;
}

.drop-zone {
    width: 200px;
    height: 100px;
    border: 2px dashed #ccc;
    text-align: center;
    line-height: 100px;
    margin: 10px;
}

.drop-zone.dragover {
    background-color: #f0f0f0;
    border-color: #4CAF50;
}
</style>
</head>
<body>

<h2>Drag and Drop Demo</h2>

<div class="drag-item" draggable="true" ondragstart="drag(event)" id="item1">
    Item 1
</div>

<div class="drop-zone" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)">
    Drop Zone
</div>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function dragEnter(ev) {
    ev.target.classList.add('dragover');
}

function dragLeave(ev) {
    ev.target.classList.remove('dragover');
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    ev.target.classList.remove('dragover');
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

</body>
</html>

🔹 File Drag and Drop

You can also drag and drop files from the computer:

<div id="dropArea" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
    Drop files here
</div>

<script>
function dragOverHandler(ev) {
    ev.preventDefault();
}

function dropHandler(ev) {
    ev.preventDefault();
    
    if (ev.dataTransfer.items) {
        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
            if (ev.dataTransfer.items[i].kind === 'file') {
                const file = ev.dataTransfer.items[i].getAsFile();
                console.log('File name: ' + file.name);
            }
        }
    }
}
</script>

HTML Drag and Drop API