Drag and Drop

Drag constrained payloads, control drag handles, and accept payload or native file drops.

Overview

Drag provides pointer movement, velocity-aware callbacks, constraints, momentum, elastic overflow, snap-back, and ancestor auto-scroll. DropZone receives a payload and indicates before, inside, or after placement.

Behaviour and customization

Drag supports x, y, and both axes. createDragControls starts a drag from a dedicated handle. DropZone can filter custom payloads or native files by MIME type, extension, or predicate.

Keep keyboard-equivalent actions available for operations that change order or location. Use Reorder for a sortable collection; reserve free Drag for direct manipulation and custom drop targets.

Interactive examples

Nested presence

Nested content

Drag and drop

Drag card

Drop here

Automatic layout

Automatic measurement

Usage

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

<Drag payload="report" axis="x" constraints={{ left: -80, right: 80 }} snapToOrigin>
	<div>Drag report</div>
</Drag>
<DropZone accept={(payload) => payload === 'report'} ondrop={() => archiveReport()}>
	Archive
</DropZone>

API

Prop	Type	Default	Description
`axis`	`'x' \| 'y' \| 'both'`	`'both'`	Permitted drag direction.
`constraints`	`DragConstraints`	`-`	Offset bounds.
`payload`	`unknown`	`-`	Value delivered to a matching DropZone.
`acceptFiles`	`string[] \| predicate`	`-`	Optional native file acceptance rule.

Components and blocks

Use this primitive directly for custom interfaces; Fractalsvelte also applies it or its motion language in these areas:

Drop targets
file uploads
custom canvases

For exact built-in component timing and reduced-motion behaviour, see the Motion guide.