Drag-and-Drop & Sortable Interfaces

Purpose

This skill helps implement drag-and-drop interactions and sortable interfaces using modern React/TypeScript libraries. It covers accessibility-first approaches, touch support, and performance optimization for creating intuitive direct manipulation UIs.

When to Use

Invoke this skill when:

• Building Trello-style kanban boards with draggable cards between columns
• Creating sortable lists with drag handles for priority ordering
• Implementing file upload zones with visual drag-and-drop feedback
• Building reorderable grids for dashboard widgets or galleries
• Creating visual builders with node-based interfaces
• Implementing any UI requiring spatial reorganization through direct manipulation

Core Patterns

Sortable Lists

Reference references/dnd-patterns.md for:

• Vertical lists with drag handles
• Horizontal lists for tab/carousel reordering
• Grid layouts with 2D dragging
• Auto-scrolling near edges

Kanban Boards

Reference references/kanban-implementation.md for:

• Multi-column boards with cards
• WIP limits and swimlanes
• Card preview on hover
• Column management (add/remove/collapse)

File Upload Zones

Reference references/file-dropzone.md for:

• Visual feedback states
• File type validation
• Multi-file handling
• Progress indicators

Accessibility

Reference references/accessibility-dnd.md for:

• Keyboard navigation patterns
• Screen reader announcements
• Alternative UI approaches
• ARIA attributes

Library Selection

Primary: dnd-kit

Modern, accessible, and performant drag-and-drop for React.

Reference references/library-guide.md for:

• Library comparison (dnd-kit vs alternatives)
• Installation and setup
• Core concepts and API
• Migration from react-beautiful-dnd

Key Features

• Built-in accessibility support
• Touch, mouse, and keyboard input
• Zero dependencies (~10KB core)
• Highly customizable
• TypeScript native

Implementation Workflow