Svelte Overview

​

Architecture

• Primitives: Reactive functions that return state and action functions
• Components: Svelte components for context and overlay management
• Type Safety: Full TypeScript support with proper type inference
• Runes Integration: Deep integration with Svelte 5’s $effect and $state

​

Core Concepts

​

DragDropProvider

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

<DragDropProvider>
  <!-- Your draggable and droppable components -->
</DragDropProvider>

​

Primitives

• createDraggable: Make elements draggable
• createDroppable: Make elements droppable
• createSortable: Combine draggable and droppable for sortable items
• createDragDropMonitor: Listen to drag and drop events
• createDragOperation: Access the current drag operation state
• getDragDropManager: Access the drag drop manager instance

​

Element Attachment

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

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

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

​

Installation

npm install @dnd-kit/svelte @dnd-kit/dom @dnd-kit/abstract

​

Package Exports

​

Core

• DragDropProvider - Context provider component
• DragOverlay - Overlay component for drag preview
• createDraggable - Draggable primitive
• createDroppable - Droppable primitive
• getDragDropManager - Manager access function
• createDragDropMonitor - Event monitoring primitive
• createDragOperation - Drag operation state primitive
• createInstance - Instance creation primitive

​

Sortable

• createSortable - Sortable item primitive
• isSortable - Type guard for sortable instances
• isSortableOperation - Type guard for sortable operations

​

Utilities

• createDeepSignal - Deep reactivity bridge for signals

​

Sensors

• PointerSensor - Mouse and touch input
• KeyboardSensor - Keyboard navigation

​

Reactivity Model

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

let disabled = $state(false);

const draggable = createDraggable({
  id: 'item-1',
  get disabled() { return disabled; }
});

// When disabled changes, the draggable automatically updates
function toggle() {
  disabled = !disabled;
}
</script>

​

Next Steps