implementing-drag-drop

Install @dnd-kit/core, @dnd-kit/sortable, and @dnd-kit/utilities, then wrap your list in DndContext with PointerSensor and KeyboardSensor. Use useSortable for each item and handle reordering in onDragEnd with arrayMove.

dnd-kit is recommended for modern React projects because it has built-in accessibility, touch and keyboard support, zero dependencies at roughly 10KB, and native TypeScript. It is the suggested migration target from react-beautiful-dnd.

Add KeyboardSensor with sortableKeyboardCoordinates so users can grab items with Space or Enter, move with arrow keys, and drop with Space. Also provide aria-live announcements and alternative move buttons for non-drag interaction.

Yes, dnd-kit supports touch input. Use a long press of 250-300ms to initiate drag, prevent scrolling during the drag operation, keep touch targets at least 44px, and test on real devices to resolve gesture conflicts.

For lists over 100 items, implement virtual scrolling and throttle drag events. Use CSS transforms instead of position properties, apply will-change for animations, and memoize components with useMemo and useCallback.

Use a dropzone pattern with accept rules for MIME types, maxSize and maxFiles validation, and visual states for drag-active, accept, and reject. Track upload progress per file with XMLHttpRequest progress events and display progress bars.