Kanban Board

Question

Create a simple Kanban board with draggable cards between columns.

Accepted Answer

import './index.css'; import React, { useState, useRef } from 'react'; const initial = { todo: ['Task 1', 'Task 2'], doing: ['Task 3'], done: ['Task 4'] }; function App() { const [columns, setColumns] = useState(initial); const dragItem = useRef(); const dragCol = useRef(); const handleDragStart = (col, idx) => { dragItem.current = idx; dragCol.current = col; }; const handleDrop = (col) => { if (dragCol.current === col) return; const from = [...columns[dragCol.current]]; const to = [...columns[col]]; const [item] = from.splice(dragItem.current, 1); to.push(item); setColumns({ ...columns, [dragCol.current]: from, [col]: to }); }; return (

Kanban Board

{Object.keys(columns).map(col => (

e.preventDefault()} onDrop={() => handleDrop(col)}>

{col.toUpperCase()}

{columns[col].map((card, idx) => (

handleDragStart(col, idx)} >{card}

))}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .kanban-demo { max-width: 800px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .kanban-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .kanban-board { display: flex; gap: 1.5rem; } .kanban-col { flex: 1; background: #f1f5f9; border-radius: 8px; padding: 1rem; min-width: 180px; } .kanban-col-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: #2563eb; } .kanban-card { background: #fff; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.7rem 1.2rem; margin-bottom: 0.7rem; cursor: grab; }