Skip to main content

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us