DropIndicator

Edge-aware drop line indicator for pragmatic-drag-and-drop surfaces

Controls

Edge Type Appearance

Preview

The indicator renders as an absolute-positioned element inside a relative container.

Item A

Item B

Item C

Usage

import { DropIndicator } from 'jatui/dnd';
import type { Edge } from 'jatui/dnd';

// In a list item that uses use:dropTarget:
let closestEdge = $state<Edge | null>(null);
<div class="relative">
  <!-- list item content -->
  {#if closestEdge}
    <DropIndicator edge={closestEdge} gap="0.5rem" />
  {/if}
</div>

Requires position: relative on the host element. Pair with extractClosestEdge() from @atlaskit/pragmatic-drag-and-drop-hitbox to get the edge value.