Quickstart

Overview

The @dnd-kit/svelte package provides a set of Svelte primitives and components that you can use to build drag and drop interfaces. It is a thin Svelte integration layer built on top of the vanilla library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as plugins, modifiers, and sensors.

Installation

Before getting started, make sure you install @dnd-kit/svelte in your project:

npm install @dnd-kit/svelte

yarn add @dnd-kit/svelte

pnpm add @dnd-kit/svelte

bun add @dnd-kit/svelte

Making elements draggable

Let’s get started by creating draggable elements that can be dropped over droppable targets. To do so, we’ll be using the createDraggable primitive.

The createDraggable primitive requires a unique id. It returns an object with an attach function that you can use with the {@attach} directive to connect an element to the drag system.

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

  const draggable = createDraggable({id: 'draggable'});
</script>

<button {@attach draggable.attach}>
  Draggable
</button>

Creating droppable elements

In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements. To do so, we’ll be using the createDroppable primitive.

Like createDraggable, the createDroppable primitive requires a unique id. This time, we’ll accept the id as a prop so we can reuse the component for multiple droppable targets.

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

  let {id, children} = $props();

  const droppable = createDroppable({id});
</script>

<div {@attach droppable.attach} style="width: 300px; height: 300px;">
  {@render children?.()}
</div>

Putting all the pieces together

Now that we have both draggable and droppable elements, we can put them together to create a simple drag and drop interaction.

We’ll be using the DragDropProvider component to wrap our draggable and droppable elements. This component handles the drag and drop interactions and allows us to listen to drag and drop events.

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

  let parent = $state(undefined);

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

<DragDropProvider {onDragEnd}>
  {#if parent == null}
    <Draggable />
  {/if}

  <Droppable id="droppable">
    {#if parent === 'droppable'}
      <Draggable />
    {/if}
  </Droppable>
</DragDropProvider>

Next steps

Now that you have a basic understanding of how to make elements draggable and droppable, you can explore the concepts covered in this quickstart guide in more detail: