Svelte Primitives

Complete API reference for dnd-kit Svelte primitives

createDraggable

Make an element draggable.

Usage

<script>
import { createDraggable } from '@dnd-kit/svelte';

const draggable = createDraggable({
  id: 'draggable-1',
  data: { type: 'card' }
});
</script>

<div 
  use:draggable.attach 
  class:dragging={draggable.isDragging}
>
  Drag me
</div>

Parameters

id · string | number · required

Unique identifier for the draggable element. Can be a getter for reactivity.

data · T

Custom data to attach to the draggable instance. Use a getter for reactive data.

disabled · boolean

Whether the draggable is disabled. Use a getter for reactivity.

alignment · Alignment

Alignment configuration for the draggable element

plugins · Plugin[]

Array of plugins to apply to this draggable

modifiers · Modifier[]

Array of modifiers to transform drag coordinates

sensors · Sensor[]

Custom sensors for this draggable instance

Returns

draggable · Draggable

The draggable instance

isDragging · boolean

Whether this element is currently being dragged (reactive getter)

isDropping · boolean

Whether this element is currently dropping (reactive getter)

isDragSource · boolean

Whether this element is the source of the current drag operation (reactive getter)

attach · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach the draggable behavior to an element

attachHandle · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach a drag handle to an element

Example with Handle

<script>
import { createDraggable } from '@dnd-kit/svelte';

const draggable = createDraggable({
  id: 'card-1',
  data: { title: 'My Card' }
});
</script>

<div use:draggable.attach class:dragging={draggable.isDragging}>
  <div use:draggable.attachHandle class="handle">
    ⋮⋮
  </div>
  <div class="content">
    Card content
  </div>
</div>

---

createDroppable

Make an element droppable.

Usage

<script>
import { createDroppable } from '@dnd-kit/svelte';

const droppable = createDroppable({
  id: 'droppable-1',
  accept: ['card']
});
</script>

<div 
  use:droppable.attach 
  class:drop-target={droppable.isDropTarget}
>
  Drop here
</div>

Parameters

id · string | number · required

Unique identifier for the droppable element. Can be a getter for reactivity.

accept · string[]

Array of draggable types this droppable accepts. Use a getter for reactivity.

type · string

Type identifier for this droppable

disabled · boolean

Whether the droppable is disabled. Use a getter for reactivity.

data · T

Custom data to attach to the droppable instance

collisionDetector · CollisionDetector

Custom collision detection algorithm

Returns

droppable · Droppable

The droppable instance

isDropTarget · boolean

Whether this element is currently a valid drop target (reactive getter)

attach · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach the droppable behavior to an element

---

createSortable

Combine draggable and droppable functionality for sortable items.

Usage

<script>
import { createSortable } from '@dnd-kit/svelte/sortable';

let items = $state([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
]);
</script>

{#each items as item, index (item.id)}
  {@const sortable = createSortable({
    id: item.id,
    group: 'list',
    get index() { return index; }
  })}
  
  <div 
    use:sortable.attach
    class:dragging={sortable.isDragging}
    class:drop-target={sortable.isDropTarget}
  >
    {item.text}
  </div>
{/each}

Parameters

Includes all parameters from createDraggable and createDroppable, plus:

group · string | number · required

The sortable group this item belongs to. Use a getter for reactivity.

index · number · required

The current index of this item in the sortable group. Use a getter for reactivity.

transition · Transition

Transition configuration for sortable animations

collisionPriority · number

Priority for collision detection when multiple droppables overlap

Returns

sortable · Sortable

The sortable instance

isDragging · boolean

Whether this element is currently being dragged (reactive getter)

isDropping · boolean

Whether this element is currently dropping (reactive getter)

isDragSource · boolean

Whether this element is the source of the current drag operation (reactive getter)

isDropTarget · boolean

Whether this element is currently a valid drop target (reactive getter)

attach · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach the sortable behavior to an element

attachHandle · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach a drag handle

attachSource · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach a source element

attachTarget · (node: HTMLElement) => { destroy: () => void }

Svelte action to attach a target element for drop positioning

---

createDragDropMonitor

Listen to drag and drop events.

Usage

<script>
import { createDragDropMonitor } from '@dnd-kit/svelte';

createeDragDropMonitor({
  onDragStart(event) {
    console.log('Drag started:', event.operation.source);
  },
  onDragMove(event) {
    console.log('Dragging:', event.operation.shape.current);
  },
  onDragEnd(event) {
    console.log('Drag ended:', event.operation);
  },
  onBeforeDragStart(event) {
    if (shouldCancel) {
      event.preventDefault();
    }
  }
});
</script>

Parameters

onBeforeDragStart · (event: BeforeDragStartEvent) => void

Called before drag starts. Can cancel the operation.

onDragStart · (event: DragStartEvent) => void

Called when drag operation starts

onDragMove · (event: DragMoveEvent) => void

Called when the dragged element moves

onDragOver · (event: DragOverEvent) => void

Called when dragging over a droppable

onDragEnd · (event: DragEndEvent) => void

Called when drag operation ends

onDragCancel · (event: DragCancelEvent) => void

Called when drag operation is cancelled

---

createDragOperation

Access the current drag operation state.

Usage

<script>
import { createDragOperation } from '@dnd-kit/svelte';

const dragOperation = createDragOperation();
</script>

{#if dragOperation.source}
  <div>Currently dragging: {dragOperation.source.id}</div>
{/if}

{#if dragOperation.target}
  <div>Over: {dragOperation.target.id}</div>
{/if}

<div>
  Status: {dragOperation.status.idle ? 'idle' : 'active'}
</div>

Returns

source · Draggable | null

The source draggable element of the current operation (reactive getter)

target · Droppable | null

The current drop target (reactive getter)

status · DragOperationStatus

The status of the drag operation (reactive getter)

---

getDragDropManager

Access the drag drop manager instance.

Usage

<script>
import { getDragDropManager } from '@dnd-kit/svelte';

const manager = getDragDropManager();

// Access manager properties
const draggables = manager.registry.draggables;
const droppables = manager.registry.droppables;
</script>

Returns

manager · DragDropManager

The drag drop manager instance

---

createDeepSignal

Create a deep reactive proxy for signal-based objects.

Usage

<script>
import { createDeepSignal } from '@dnd-kit/svelte/utilities';

const tracked = createDeepSignal(() => manager.dragOperation);

// Accessing nested signal properties triggers reactivity
const sourceId = tracked.current.source?.id;
</script>

Parameters

getTarget · () => T · required

A function that returns the target object to track (typically contains signals)

Returns

current · T

A reactive getter that proxies access to the target and triggers reactivity on nested signal reads