Allow overlap
Let grid items stack on top of each other without collision, so cards can overlap freely while you drag and resize them in this dnd-grid React example.
How it works
Compaction is what stops two grid items occupying the same cell. Swapping the compactor changes that rule: this example toggles between verticalCompactor, which pulls items upward and pushes colliding neighbours out of the way, and verticalOverlapCompactor, which lets items sit on top of one another.
Overlap is useful for canvas-style surfaces where the user is arranging free-floating cards rather than filling a dense dashboard. Because the compactor is just a function passed to the compactor prop, you can flip it at runtime — as the toggle here does — or supply your own to encode a different packing rule.
Related examples
- Compactor showcase — Switch between vertical, horizontal, and no compaction to see how dnd-grid repositions items and fills empty space as you drag them around the grid.
- Static items — Mark items as static so they cannot be moved or resized while other items drag and reflow around them in this static-items dnd-grid React example.
- Constraints — Plug in custom constraints and rules to control where items can move and how far they can resize in this constraint-driven dnd-grid React layout example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.