Fractal UI Motif Fractal UI Type
On this Page

DragConstraints

DragConstraints defines the optional offset limits applied to a Drag interaction. It is a TypeScript interface, not a rendered component or a runtime value.

Usage

Bounded movement

Drag the card in any direction; each edge is clamped to the configured offset bounds.

Drag within the bounds
Example 
<script lang="ts">
	import { Drag, type DragConstraints } from "fractalsvelte/motion";

	const constraints: DragConstraints = { left: -96, right: 96, top: -40, bottom: 40 };
</script>

<Drag {constraints}>
	<div class="box">Drag within the bounds</div>
</Drag>
Svelte 
<script lang="ts">
	import { Drag, type DragConstraints } from "fractalsvelte/motion";

	const constraints: DragConstraints = {
		left: -120,
		right: 120,
		top: -48,
		bottom: 48,
	};
</script>

<Drag {constraints}>
	<div>Drag within these bounds</div>
</Drag>

Constraint values are pixel offsets from the drag element’s origin. Omit an edge to leave movement unbounded in that direction.

API

FieldTypeDescription
leftnumber (optional)Minimum horizontal offset.
rightnumber (optional)Maximum horizontal offset.
topnumber (optional)Minimum vertical offset.
bottomnumber (optional)Maximum vertical offset.

DragConstraints is accepted by the constraints prop on Drag:

TypeScript 
type DragConstraints = {
	left?: number;
	right?: number;
	top?: number;
	bottom?: number;
};

Behaviour

Constraints are evaluated for the axes enabled by Drag. With dragElastic, a dragged item may travel beyond a bounded edge by the configured elastic fraction; without it, motion clamps at the edge. Momentum also resolves to a point inside the same bounds.

Use axis to limit movement to x or y, snapToOrigin to return the item after release, and DragInfo callbacks to read live offset and velocity values.