HTML Drag and Drop

What is Drag and Drop?

Drag and Drop is a browser feature used for moving elements visually.

It is commonly used in:

• File uploads
• Kanban boards
• Task managers
• Game interfaces

Make an Element Draggable

Drag Me

Important Events

Live Demo

Drag the green box into another box.

JavaScript Code

function allowDrop(event){

event.preventDefault();

}

function drag(event){

event.dataTransfer.setData(
"text",
event.target.id
);

}

function drop(event){

event.preventDefault();

let data =
event.dataTransfer.getData("text");

event.target.appendChild(
document.getElementById(data)
);

}

Benefits of Drag and Drop

• Interactive user experience
• Easy file handling
• Visual task management
• Improves UI usability