DragInfo

DragInfo is the callback payload emitted by Drag when an interaction starts, moves, or ends. It provides the current displacement from the drag origin and the most recently sampled pointer velocity.

Usage

<script lang="ts">
	import { Drag, type DragInfo } from "fractalsvelte/motion";

	let status = $state("Ready");
	function report(info: DragInfo) {
		status = `offset: ${Math.round(info.offset.x)}, ${Math.round(info.offset.y)} · velocity: ${Math.round(info.velocity.x)}, ${Math.round(info.velocity.y)}`;
	}
</script>

<Drag ondrag={report}>
	<div>Drag me</div>
</Drag>
<p>{status}</p>

<script lang="ts">
	import { Drag, type DragInfo } from "fractalsvelte/motion";

	let status = $state("Ready");

	function handleDragEnd(info: DragInfo) {
		status = `Released at ${Math.round(info.offset.x)}, ${Math.round(info.offset.y)}`;
	}
</script>

<Drag ondragend={handleDragEnd}>
	<div>Drag me</div>
</Drag>

<p>{status}</p>

Use ondragstart, ondrag, and ondragend to receive the same shape at each phase.

API

interface DragInfo {
	offset: { x: number; y: number };
	velocity: { x: number; y: number };
}

Behaviour

offset follows enabled axes and constraints: an x-only drag always reports offset.y as 0, and a constrained edge limits the reported value. velocity is sampled from pointer movement immediately before the callback. The value drives the optional momentum target after ondragend returns.

Related API

Use DragConstraints to bound offset, momentum={false} to skip the velocity-based settle, and snapToOrigin to animate the item back to zero after release.