implementing-drag-drop_skill

Overview

This skill implements drag-and-drop and sortable interfaces in React + TypeScript, focused on accessible, touch-friendly, and high-performance direct-manipulation UIs. It provides patterns and examples for kanban boards, sortable lists, file drop zones, and reorderable grids. The guidance prioritizes accessibility, mobile support, and scalable performance.

How this skill works

The skill uses modern libraries (primary: dnd-kit) and TypeScript types to wire sensors, sortable logic, and modifiers into React components. It includes ready patterns for single-axis sorting, multi-container kanbans, 2D grid reordering, and file dropzones, plus scripts and utilities for calculating drop positions, validating accessibility, and generating dnd-kit configs. Examples include keyboard handling, ARIA announcements, touch gestures, and performance optimizations like virtual scrolling.

When to use it

• Building Trello-style kanban boards with draggable cards
• Creating sortable lists with drag handles for priority ordering
• Implementing file upload zones with visual drag-and-drop feedback
• Building reorderable grids for dashboards or galleries
• Creating visual builders or node-based interfaces that require spatial reorganization

Best practices

• Prefer dnd-kit for accessibility and TypeScript-first APIs; configure sensors and modifiers explicitly
• Always provide keyboard controls, ARIA announcements, and non-drag alternatives for accessibility
• Use CSS transforms and will-change: transform for smooth animations and GPU compositing
• Throttle expensive calculations and enable virtual scrolling for lists >100 items
• Provide clear visual feedback: drag handles, placeholders, semi-transparent drag previews, and valid-target highlights
• Test touch behaviors (long-press, prevent scroll) and cross-browser assistive tech (NVDA/VoiceOver)

Example use cases

• Sortable task list with drag handles and keyboard reordering
• Kanban board with multi-column card movement, WIP limits, and column collapse
• File dropzone component with file type validation and upload progress UI
• Responsive dashboard grid where widgets can be reordered via 2D dragging
• Visual page builder allowing nested dragging and custom drag previews