Drag & Drop Kanban Board

An interactive Kanban board with drag and drop functionality for task management. Perfect for project management, task tracking, or organizing any workflow with visual columns.

✨ Features

• Drag & Drop: Smooth drag and drop between columns
• Multiple Columns: Create unlimited columns for different stages
• Task Management: Add, edit, and delete tasks easily
• Responsive Design: Works perfectly on all devices
• Local Storage: Tasks persist between sessions
• Customizable: Easy to customize colors and styling
• Accessible: Built with keyboard navigation support
• Touch Support: Works on touch devices

🚀 Live Demo

View on CodePen

📁 Files

• index.html - Main HTML structure
• style.css - All styling and animations
• script.js - JavaScript functionality

🛠️ Usage

Basic Implementation

<div class="kanban-board">
    <div class="column" data-column="todo">
        <h3>To Do</h3>
        <div class="tasks" id="todo-tasks">
            <div class="task" draggable="true" data-task-id="1">
                <h4>Task Title</h4>
                <p>Task description goes here</p>
            </div>
        </div>
        <button class="add-task-btn">+ Add Task</button>
    </div>
    <!-- More columns... -->
</div>

JavaScript Initialization

// Initialize Kanban board
const kanban = new KanbanBoard({
    columns: ['todo', 'in-progress', 'done'],
    enableDragDrop: true,
    enableLocalStorage: true
});

🎨 Customization Options

• Columns: Add/remove columns and customize names
• Colors: Change column and task colors
• Layout: Modify board layout and spacing
• Animations: Adjust drag and drop animations
• Task Types: Add different task types with custom styling

⚙️ Configuration

const config = {
    columns: ['todo', 'in-progress', 'done'],  // Column names
    enableDragDrop: true,                      // Enable drag & drop
    enableLocalStorage: true,                  // Save to localStorage
    maxTasksPerColumn: 10,                     // Max tasks per column
    animationDuration: 300,                    // Animation duration (ms)
    allowEmptyColumns: true                    // Allow empty columns
};

📱 Browser Support

• Chrome ✅
• Firefox ✅
• Safari ✅
• Edge ✅
• IE11+ ✅

🤝 Contributing

Feel free to submit issues and enhancement requests!

📄 License

This project is open source and available under the MIT License.

👨‍💻 Created by

HarmonCode - harmoncode.com

---

⭐ If you find this useful, please give it a star!