Implementing a drag-and-drop kanban board with react-dnd

Scenario

Context A project management tool requires a Kanban board where cards can be dragged between columns and reordered within a column. The Problem The current implementation uses HTML5 drag events directly, producing inconsistent behavior across browsers and no visual drag preview. Constraints Use react-dnd with the HTML5 backend. Implement useDrag on cards and useDrop on columns and card slots. Update the underlying state immutably on each drop event. Show a drag preview during the drag gesture. Expected Deliverable A React Kanban board using react-dnd for cross-column drag-and-drop, with correct immutable state updates and a custom drag preview.

Targeted skills