react-html5-drag-drop-pitfalls

What problem does it solve?

The native HTML5 drag-and-drop API in React has 4 silent failure modes that produce no console errors, leading to broken kanban boards, sortable lists, file dropzones, and other draggable UIs that appear to work but fail to complete drop operations correctly.

Core Features & Use Cases

• Covers the 4 most common silent failure modes: missing dataTransfer.setData in onDragStart, missing preventDefault in onDragOver, click handler bubbling through draggable elements, and stuck dragOver state flags
• Includes a verified working kanban card and column code pattern, a step-by-step diagnostic checklist for troubleshooting non-functional drag-and-drop, and guidance for touch device compatibility
• Use cases include Trello-style kanban boards, sortable task lists, file upload dropzones, and cross-pane move interfaces for CRM, project management, and dashboard tools

Quick Start

Use this skill to debug a non-firing React HTML5 drag-and-drop drop handler by checking for missing dataTransfer.setData calls in onDragStart and missing preventDefault calls in onDragOver.