Fractal UI Motif Fractal UI Type
On this Page

DropPosition

DropPosition identifies where a dragged payload is positioned over a DropZone. It is a TypeScript union used by the position prop and ondragover callback.

Interactive example

Automatic insertion position

Drag the card over the target; DropZone reports a source-backed DropPosition before committing the drop.

Drag and drop

Drag the card into the matching drop target.

Drag card
Drop here
Example 
<script lang="ts">
	import { DropZone } from 'fractalsvelte';
</script>

<DropZone position="auto" ondragover={(position) => (placement = position)} ondrop={commit}>Drop target</DropZone>

Usage

Svelte 
<script lang="ts">
	import { DropZone, type DropPosition } from "fractalsvelte/motion";

	let placement = $state<DropPosition>("inside");
</script>

<DropZone
	position="auto"
	ondragover={(next) => (placement = next)}
	ondrop={(payload) => moveItem(payload, placement)}
>
	Drop before, inside, or after this item
</DropZone>

Set position="auto" when a list or tree should determine insertion position from the pointer location.

API

ValueDescription
"before"The pointer is over the leading third of the drop target.
"inside"The pointer is over the central portion of the drop target.
"after"The pointer is over the trailing third of the drop target.
TypeScript 
type DropPosition = "before" | "inside" | "after";

DropZone accepts position: DropPosition | "auto". In fixed mode, the chosen DropPosition is reported for every drag over the zone. In automatic mode, the zone divides its longer dimension into leading, middle, and trailing thirds.

Behaviour

For a wide target, automatic placement is calculated from the horizontal pointer position. For a taller target, it uses the vertical position. DropZone exposes the current value as data-position and applies an inset indicator for before and after, making the selected insertion point available to both styling and callbacks.

Pair ondragover with ondrop to keep a pending insertion indicator and commit a reorder. Use accept for application payload filtering and acceptFiles for native file-drop filtering.