react-beautiful-dnd: Behind the magic
summary
react-beautiful-dnd (rbd) implements a full drag-and-drop engine: it registers components via a registry to collect DOM dimensions, snapshots an item's size and applies position:fixed + portal while inserting a placeholder to prevent layout collapse, and uses mouse, touch, keyboard sensors with a lock to prevent concurrent drags. Offscreen work is avoided by windowing, motion uses GPU-friendly CSS transforms and transitions with dynamic duration, animations are interruptible, collision resolution runs in a small physics engine, and ARIA live regions ship out of the box and are overrideable.
AI-written summary · about
chapters (10)
- 0:00Intro
- 0:35What is RBD
- 1:43Sensor
- 3:51Lock
- 5:47Snapshots
- 7:04Position Fix
- 9:37Windowing
- 12:59Moving
- 15:29Drop Animations
- 20:56Draggable Items
