CRZ Patterns

Drag & Drop Reorder

SPA assumption: "dnd-kit / react-beautiful-dnd required"

Limitations of HTML5 Drag and Drop API

  • No touch support — does not work on mobile/tablet. Touch requires a library (dnd-kit, etc.)
  • Limited drag preview control — customizing the dragged element's appearance is restricted
  • Drop target highlighting — managing dragenter/dragleave state is verbose and error-prone
  • No keyboard accessibility — the API does not include keyboard-based drag and drop

This demo shows that basic desktop reorder works without a framework or library. When production requires rich DnD (touch, accessibility, custom previews), adopting a library is a justified decision under CRZ principles.