Skip to main content

​
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

All input properties accept plain values or getter functions for reactivity.
​
id
UniqueIdentifier | (() => UniqueIdentifier)
required
A unique identifier for this draggable instance.
​
disabled
boolean | (() => boolean)
Whether the draggable is disabled.
​
plugins
PluginDescriptor[] | (() => PluginDescriptor[])
An array of plugin descriptors for per-entity plugin configuration. Use Plugin.configure() to create descriptors. For example, Feedback.configure({ feedback: 'clone' }).
​
modifiers
Modifier[] | (() => Modifier[])
Modifiers to apply to this draggable instance.
​
sensors
Sensor[] | (() => Sensor[])
Sensors to use for this draggable instance.
​
data
Data | (() => Data)
Custom data to attach to this draggable instance.

​
Output

The returned object provides reactive properties and attachment functions:
​
isDragging
boolean
Whether this element is currently being dragged (visually).
​
isDropping
boolean
Whether this element is in the process of being dropped (animating to final position).
​
isDragSource
boolean
Whether this element is the source of the current drag operation.
​
draggable
Draggable
The underlying Draggable instance.
​
attach
(element: HTMLElement) => () => void
Attachment function for the draggable element. Use with {@attach}.
​
attachHandle
(element: HTMLElement) => () => void
Attachment function for a drag handle. Use with {@attach}.

​
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, createDraggable} from '@dnd-kit/svelte';

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

<DragDropProvider>
  <button {@attach draggable.attach}>Draggable</button>
  <DragOverlay>
    {#snippet children(source)}
      <div>I will be rendered while dragging...</div>
    {/snippet}
  </DragOverlay>
</DragDropProvider>
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.
You should only render the <DragOverlay> component once per DragDropProvider.