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.
How it works
Constraints are functions that inspect a proposed layout change and return a corrected one. They run for both drags and resizes, so a single rule can keep an item out of a reserved region, pin it to a column, or cap how large it may grow.
This example reserves a band at the top of the grid that items cannot enter. Constraints compose — pass an array and each is applied in turn — which lets you build a complex policy out of small, individually testable rules.
Related examples
- Aspect ratio constraints — Lock item resizing to a fixed aspect ratio so cards keep their proportions while you drag the resize handles in this dnd-grid React layout example.
- Bounded — Keep grid items inside the grid bounds so they cannot be dragged or resized outside the container in this bounded dnd-grid React layout example.
- 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.
- 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.