HTML Drag and Drop API

# HTML Drag and Drop API

1. Introduction #

2. Learning Objectives #

• Make an element draggable.

• Create a drop zone.

• Understand the basic JavaScript events required (ondragstart, ondragover, ondrop).

3. Detailed Explanations #

Step 1: Make it Draggable #

<img id="drag1" src="logo.png" draggable="true" ondragstart="drag(event)">

Step 2: What to Drag (ondragstart) #

function drag(ev) {
    // Save the ID of the element being dragged
    ev.dataTransfer.setData("text", ev.target.id);
}

Step 3: Where to Drop (ondragover) #

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

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

Step 4: Do the Drop (ondrop) #

function drop(ev) {
    ev.preventDefault();
    // Get the ID of the dragged item
    var data = ev.dataTransfer.getData("text");
    // Append the item to the drop zone
    ev.target.appendChild(document.getElementById(data));
}

4. Mini Project: Task Board UI (Kanban) #

<style>
.column { width: 200px; min-height: 300px; border: 1px solid #ccc; padding: 10px; float: left; margin: 10px; background: #f9f9f9; }
.task { background: #fff; border: 1px solid #999; padding: 10px; margin-bottom: 10px; cursor: grab; }
</style>

<!-- Drop Zones -->
<div class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>To Do</h3>
    <!-- Draggable Task -->
    <div class="task" id="task1" draggable="true" ondragstart="drag(event)">Task 1</div>
    <div class="task" id="task2" draggable="true" ondragstart="drag(event)">Task 2</div>
</div>

<div class="column" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>Done</h3>
</div>

5. MCQs #

6. Summary #