Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 45Advanced JavaScript & Browser APIs3 Hours Practical
Push to GitHub to Complete
HTML5 Drag & Drop API (Building an Interactive Kanban Task Board)
The HTML5 Drag and Drop (DnD) API allows users to grab DOM elements with their mouse or pointer, drag them across the viewport, and drop them into designated target dropzones. This API powers modern project management tools like Trello, Jira, and GitHub Project Boards.
Interactive Learning Roadmap
Day 45 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Enable native browser dragging by setting the HTML attribute draggable="true".
✔Handle key drag lifecycle events: dragstart, dragend, dragover, dragenter, dragleave, and drop.
✔Pass structured data across drag zones using the DataTransfer object (e.dataTransfer.setData()).
✔Build a multi-column Kanban board (To Do, In Progress, Done) with smooth visual dropzone feedback.
✔Persist card positions across columns into localStorage so board state survives page refreshes.
Day 45 MasterclassAdvanced JavaScript & Browser APIs
HTML5 Drag & Drop API (Building an Interactive Kanban Task Board) — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
The HTML5 Drag and Drop (DnD) API allows users to grab DOM elements with their mouse or pointer, drag them across the viewport, and drop them into designated target dropzones. This API powers modern project management tools like Trello, Jira, and GitHub Project Boards.
Draggable Attribute: Elements are not draggable by default; you must explicitly set draggable="true" on the element.
DataTransfer Object: During dragstart, store payload data using e.dataTransfer.setData("text/plain", cardId). During drop, read it with e.dataTransfer.getData("text/plain").
Dragover Requirement: You MUST invoke e.preventDefault() inside the dragover event listener; otherwise the drop event will never fire!
Visual Feedback: Use dragenter and dragleave to add and remove highlight CSS classes (e.g. .drag-over) on column containers.
DOM Repositioning: Inside drop, append the dragged element using targetColumn.appendChild(draggedCard).
Dimaag Mein Bithane Ka Model
"Imagine a physical whiteboard with sticky notes categorized into columns (Planning, In Progress, Finished). Drag and drop lets you peel a sticky note off the whiteboard, carry it across to a new column, and press it firmly against the new column."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how cards are transferred between columns with animated drop indicators and clean DOM appending.
2-Column Drag and Drop Kanban Board Demohtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop Kanban</title>
<style>
body { font-family: system-ui, sans-serif; background: #060c18; color: #fff; padding: 24px; }
.board { display: flex; gap: 20px; max-width: 720px; margin: auto; }
.column { flex: 1; background: #0c1328; border: 2px dashed #1e293b; border-radius: 12px; padding: 16px; min-height: 250px; }
.column.drag-over { border-color: #38bdf8; background: #0f1d3a; }
.card { background: #1e293b; border: 1px solid #334155; padding: 12px; border-radius: 8px; margin-bottom: 10px; cursor: grab; }
</style>
</head>
<body>
<div class="board">
<div class="column" id="col-todo">
<h4>📋 To Do</h4>
<div class="card" draggable="true" id="c1">Study BCS-111 Networking</div>
</div>
<div class="column" id="col-done">
<h4>✅ Completed</h4>
<div class="card" draggable="true" id="c2">Setup VS Code Environment</div>
</div>
</div>
<script>
let dragged = null;
document.querySelectorAll(".card").forEach(c => {
c.addEventListener("dragstart", (e) => { dragged = e.target; });
});
document.querySelectorAll(".column").forEach(col => {
col.addEventListener("dragover", (e) => { e.preventDefault(); col.classList.add("drag-over"); });
col.addEventListener("dragleave", () => { col.classList.remove("drag-over"); });
col.addEventListener("drop", (e) => {
e.preventDefault();
col.classList.remove("drag-over");
if (dragged) col.appendChild(dragged);
});
});
</script>
</body>
</html>2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
3 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 45 Practical Task Test Studio
Test Score:1 / 3 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Add draggable Attribute to Elements
Add draggable="true" attribute to task cards so the browser allows native dragging.
✔ PASSED
Task 2Prevent Default on dragover
Call e.preventDefault() inside the dragover event listener to designate container as drop zone.
⏳ WAITING
Task 3Append Dragged Element on Drop
Inside the drop event handler, prevent default and append the dragged element into the drop column.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh164 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Drop Event Never Fires
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
const column = document.getElementById("doneCol");2
// ❌ Missing dragover listener!3
column.addEventListener("drop", (e) => {4
console.log("Card dropped!");5
column.appendChild(draggedItem);6
});Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
By default, browser elements reject drops. Without an active dragover event listener that explicitly executes e.preventDefault(), the browser cancels the drop action and the "drop" event is never triggered.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 index.htmlBCA 3-Column Sprint Project Kanban Board
- •Build a 3-column Kanban workspace: "Backlog", "In Development", and "Verified & Completed".
- •Provide an "Add New Task" modal or input form to dynamically spawn new draggable cards.
- •Highlight columns dynamically with cyan borders when a card is dragged over them.
- •Persist all card positions in localStorage so refreshing the page restores the exact column state.
Submission Evaluation Criteria: Push kanban-board.html and kanban.js to your GitHub repository under day-45.
Exact Assignment Solution Code: index.html
Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCA Day 45 - Kanban Board</title>
<style>
body { font-family: "Segoe UI", sans-serif; background: #060c18; color: #fff; padding: 24px; }
.header { max-width: 900px; margin: auto; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: auto; }
.col { background: #0c1328; border: 2px dashed #1e293b; border-radius: 12px; padding: 16px; min-height: 380px; }
.col.hovered { border-color: #38bdf8; background: #0f1e3d; }
.card { background: #1e293b; border: 1px solid #334155; padding: 12px; border-radius: 8px; margin-bottom: 10px; cursor: grab; user-select: none; }
</style>
</head>
<body>
<div class="header">
<h2>📋 BCA Sprint Kanban Board</h2>
<div>
<input type="text" id="taskInput" placeholder="New task..." />
<button id="addBtn">+ Add Card</button>
</div>
</div>
<div class="board">
<div class="col" id="col-backlog"><h4>📌 Backlog</h4><div class="card" draggable="true">Write Unit Tests</div></div>
<div class="col" id="col-progress"><h4>⚙️ In Progress</h4><div class="card" draggable="true">Canvas Pad</div></div>
<div class="col" id="col-done"><h4>✅ Completed</h4><div class="card" draggable="true">ES6 Setup</div></div>
</div>
<script>
let dragged = null;
function attach(card) {
card.addEventListener("dragstart", (e) => { dragged = e.target; });
}
document.querySelectorAll(".card").forEach(attach);
document.querySelectorAll(".col").forEach(col => {
col.addEventListener("dragover", (e) => { e.preventDefault(); col.classList.add("hovered"); });
col.addEventListener("dragleave", () => { col.classList.remove("hovered"); });
col.addEventListener("drop", (e) => {
e.preventDefault();
col.classList.remove("hovered");
if (dragged) col.appendChild(dragged);
});
});
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
Which method on navigator.geolocation triggers continuous tracking of user coordinates as they move?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-45
Create a new project folder (day-45)
2$
cd day-45
Change working directory to day-45
3$
git checkout -b feature/day-45-kanban-dnd
4$
git add index.html
5$
git commit -m "feat(day-45): build 3-column interactive kanban task board using html5 drag and drop api"
Commit staged changes with a descriptive message
6$
git push origin feature/day-45-kanban-dnd
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 45 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-45/ or bca-day-45/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 45
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 45
4$
mkdir day-45
Create a new project folder (day-45)
5$
cd day-45
Change working directory to day-45
6$
# 3. Create your code file: index.html
7$
# (Write your Day 45 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 45: HTML5 Drag & Drop API (Building an Interactive Kanban Task Board)"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-45/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/Day 30 Prior Lesson
└──index.html
└──styles.css
day-31/Day 31 Prior Lesson
└──index.html
day-32/Day 32 Prior Lesson
└──index.html
day-33/Day 33 Prior Lesson
└──index.html
day-34/Day 34 Prior Lesson
└──index.html
day-35/Day 35 Prior Lesson
└──index.html
day-36/Day 36 Prior Lesson
└──index.html
day-37/Day 37 Prior Lesson
└──index.html
day-38/Day 38 Prior Lesson
└──index.html
day-39/Day 39 Prior Lesson
└──index.html
day-40/Day 40 Prior Lesson
└──index.html
day-41/Day 41 Prior Lesson
└──index.html
day-42/Day 42 Prior Lesson
└──index.html
day-43/Day 43 Prior Lesson
└──index.html
day-44/Day 44 Prior Lesson
└──index.html
day-45/✨ CREATE THIS FOLDER FOR TODAY (Day 45)
└──index.htmlMust contain:
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 45 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 44: Custom HTML5 Audio & Video Player (Media API & Real-time Progress Bar) first.
Complete Day 44 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal