implementing-drag-droplisted

# 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