createDraggable

Usage

The createDraggable primitive requires a unique id. It returns an object with attach and attachHandle functions for connecting elements, and reactive state properties.

Input

Input properties are plain values that are read reactively. To keep an option in sync with reactive state, define it as a getter property on the input object (for example, createDraggable({id, get disabled() { return disabled; }})) so the primitive re-reads it when the underlying $state changes.

Output

The returned object provides reactive properties and attachment functions:

Guides

Using drag handles

You can use attachHandle to designate a specific element as the drag handle:

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

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

<div {@attach draggable.attach}>
  Drag me by the handle
  <button {@attach draggable.attachHandle} class="handle" />
</div>

Rendering a drag overlay

You can render a completely different element while the draggable element is being dragged by using the <DragOverlay> component.

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

<DragDropProvider>
  <Draggable id="draggable" />
  <DragOverlay>
    {#snippet children(source)}
      <div>I will be rendered while dragging...</div>
    {/snippet}
  </DragOverlay>
</DragDropProvider>

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

  let {id} = $props();

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

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

The <DragOverlay> component will only render its children when a drag operation is in progress. This can be useful for rendering a completely different element while the draggable element is being dragged.