Drag-to-reorder palette

Interactive demos of list reordering — native APIs, accessibility patterns, and popular libraries.

Drag-to-reorder techniques demonstration palette

HTML5 draggable API
Uses the browser's native drag-and-drop. Simplest approach — no library needed. Works on desktop; not touch-friendly by default. Relies on dragstart, dragover, drop events.
Native API
  • 1 Design system audit
  • 2 Migrate to TypeScript
  • 3 Write unit tests
  • 4 Performance profiling
  • 5 Accessibility review
MDN: Drag and Drop API web.dev guide
Pointer Events API
Uses pointerdown / pointermove / pointerup. Works seamlessly on both mouse and touch. You control the ghost element and drop logic entirely in JS — more power, more code. Best for custom drag experiences.
Pointer API
  • Q1 roadmap review
  • Hire senior engineer
  • Ship v2.0
  • Budget planning
  • Stakeholder sync
MDN: Pointer Events CSS-Tricks tutorial
Keyboard-accessible drag
Click the grip to select an item, then use ↑ ↓ to move it, Enter or Space to drop, Escape to cancel. Essential for WCAG 2.1 compliance — screen readers and keyboard-only users must be able to reorder.
Accessible
  • Research competitors
  • Write proposal
  • Schedule kickoff
  • Create wireframes
  • User testing
↑↓ to move  ·  Enter to drop  ·  Esc to cancel
ARIA APG: Reorderable listbox Atlassian a11y guide
Grid / card sort
2D sorting across a grid layout. Drop targets are calculated by hit-testing card centres. Common in dashboards, app icon screens, and kanban boards. Uses HTML5 draggable but with 2D drop-target detection.
Native API
  • 📊Analytics
  • 🔔Alerts
  • 💬Messages
  • 📁Files
  • ⚙️Settings
  • 👤Profile
  • 📅Calendar
  • 🔍Search
@shopify/draggable SortableJS demo
Horizontal list sort
Useful for tab bars, column headers, pipeline stages, and tag editors. The same HTML5 events apply but drop-zone boundaries are on the left/right edges rather than top/bottom.
Native API
Pipeline stages — drag to reorder
  • Lead
  • Qualified
  • Proposal
  • Negotiation
  • Closed Won
  • Closed Lost
dnd kit sortable preset react-beautiful-dnd
Library comparison
When you need more than the native API offers — animations, multi-list, touch, constraints — reach for a library.
Libraries
@dnd-kit/core React
Modular, accessible, touch-first React library. Highly composable — build your own sensors, collision algorithms, and modifiers. The current go-to for React apps.
dndkit.com
SortableJS Vanilla / any
Zero-dependency, works with any framework. Supports multi-drag, swap, nested lists, and ghost clone. Extremely battle-tested. Best vanilla/Vue/Angular option.
sortablejs.github.io
react-beautiful-dnd React
Atlassian's library, famous for silky spring animations. Now in maintenance mode — dnd-kit is the recommended successor. Still excellent for existing codebases.
GitHub
Pragmatic drag and drop React / any
Atlassian's new successor to rbd. Framework-agnostic adapter layer built on the native DnD API. Powers Jira and Confluence. Very small core (~800 B), opt-in pieces.
Atlassian Design
Framer Motion drag React
If you're already using Framer Motion, drag + layout props give you animated reorder nearly for free. Not a full DnD solution but great for UI polish use-cases.
motion.dev/docs
@shopify/draggable Vanilla / any
Pointer-events based, mobile-first. Plugins for sortable, swappable, droppable, and mirror. More opinionated than SortableJS; excellent for complex drag behaviours.
shopify.github.io/draggable