@dnd-kit/svelte

The Svelte adapter for @dnd-kit — a lightweight, performant, and extensible drag and drop toolkit. Built on top of @dnd-kit/dom, it provides idiomatic Svelte 5 primitives using runes and attachments.

Requirements

• Svelte 5.29 or later

Installation

npm install @dnd-kit/svelte

Quick start

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

  let droppedIn = $state(false);

  const draggable = createDraggable({id: 'draggable'});
  const droppable = createDroppable({id: 'droppable'});

  function onDragEnd(event) {
    if (event.canceled) return;
    droppedIn = event.operation.target?.id === 'droppable';
  }
</script>

<DragDropProvider {onDragEnd}>
  {#if !droppedIn}
    <button {@attach draggable.attach}>Drag me</button>
  {/if}

  <div {@attach droppable.attach}>
    {#if droppedIn}
      <button {@attach draggable.attach}>Dropped!</button>
    {/if}
  </div>
</DragDropProvider>

Primitives

Each primitive returns an object with reactive state (e.g. isDragging, isDropTarget) and attach / attachHandle functions for use with the {@attach} directive.

Components

• <DragDropProvider> — Wraps your drag and drop interface, manages sensors, plugins, and events.
• <DragOverlay> — Renders a custom overlay element during drag operations.

Documentation

Visit dndkit.com for full documentation, guides, and interactive examples.