apps/docs/svelte/primitives/create-draggable.mdx
import {Story} from '/snippets/story.mdx';
<Story id="draggable-basic-setup--example" framework="svelte" height="200" hero />The createDraggable primitive requires a unique id. It returns an object with attach and attachHandle functions for connecting elements, and reactive state properties.
<script>
import {createDraggable} from '@dnd-kit/svelte';
const draggable = createDraggable({id: 'my-draggable'});
</script>
<button {@attach draggable.attach}>
Drag me
</button>
All input properties accept plain values or getter functions for reactivity.
<ParamField path="id" type="UniqueIdentifier | (() => UniqueIdentifier)" required> A unique identifier for this draggable instance. </ParamField> <ParamField path="disabled" type="boolean | (() => boolean)" optional> Whether the draggable is disabled. </ParamField> <ParamField path="plugins" type="PluginDescriptor[] | (() => PluginDescriptor[])" optional> An array of plugin descriptors for per-entity plugin configuration. Use `Plugin.configure()` to create descriptors. For example, `Feedback.configure({ feedback: 'clone' })`. </ParamField> <ParamField path="modifiers" type="Modifier[] | (() => Modifier[])" optional> Modifiers to apply to this draggable instance. </ParamField> <ParamField path="sensors" type="Sensor[] | (() => Sensor[])" optional> Sensors to use for this draggable instance. </ParamField> <ParamField path="data" type="Data | (() => Data)" optional> Custom data to attach to this draggable instance. </ParamField>The returned object provides reactive properties and attachment functions:
<ResponseField name="isDragging" type="boolean"> Whether this element is currently being dragged (visually). </ResponseField> <ResponseField name="isDropping" type="boolean"> Whether this element is in the process of being dropped (animating to final position). </ResponseField> <ResponseField name="isDragSource" type="boolean"> Whether this element is the source of the current drag operation. </ResponseField> <ResponseField name="draggable" type="Draggable"> The underlying `Draggable` instance. </ResponseField> <ResponseField name="attach" type="(element: HTMLElement) => () => void"> Attachment function for the draggable element. Use with `{@attach}`. </ResponseField> <ResponseField name="attachHandle" type="(element: HTMLElement) => () => void"> Attachment function for a drag handle. Use with `{@attach}`. </ResponseField>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>
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.