Constraint Area

makeConstraintArea limits drag movement to an axis or confines the drag overlay within an element's bounds.

Restrict to area

The overlay cannot leave the marked container bounds (restrictToArea: true).

Constraint area

Drag me

Axis lock

Drag movement is locked to a single axis. Left: horizontal only (axis: 'x'). Right: vertical only (axis: 'y').

axis: x

Horizontal only

axis: y

Vertical only

Source

• AreaBoundsExample.vue
• AxisExample.vue
• ConstraintBox.vue

What's used

• ConstraintBox — calls makeConstraintArea on its own root element; must be a child of DnDProvider.
• DragChip — makeDraggable with no payload (free drag, no sort logic).
• restrictToArea: true — overlay stays within the constraint box bounds.
• axis: 'x' / axis: 'y' — overlay movement locked to one axis. Each axis demo runs in its own DnDProvider to avoid cross-constraints.