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.
How it works
By default an item can be dragged past the top or left edge of its container while a drag is in flight. Setting the bounded prop clamps movement so items stay fully inside the grid for the whole gesture, not just when the drag is released.
This matters most when the grid is the whole page surface and there is no scroll region to absorb an overshoot. Combine it with constraints when you need a stricter rule than the container edges.
Related examples
- 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.
- 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.
- Scale — Keep drag and resize maths correct when the grid is visually scaled with CSS transforms in this scale-aware dnd-grid React grid layout example.