useDraggable Composable - Vue

Usage

The useDraggable composable requires a unique id and an element template ref. It returns reactive computed properties for the drag state.

<script setup>
import {ref} from 'vue';
import {useDraggable} from '@dnd-kit/vue';

const element = ref(null);
const {isDragging} = useDraggable({id: 'my-draggable', element});
</script>

<template>
  <button ref="element" :data-dragging="isDragging">
    Drag me
  </button>
</template>

Input

All input properties accept plain values or Vue refs/getters (MaybeRefOrGetter), so they can be reactive.

MaybeRefOrGetter<UniqueIdentifier>

required

A unique identifier for this draggable instance.

element

MaybeRefOrGetter<HTMLElement | null>

required

A template ref pointing to the draggable element.

handle

MaybeRefOrGetter<HTMLElement | null>

A template ref for a drag handle. When set, only this element activates dragging.

disabled

MaybeRefOrGetter<boolean>

Whether the draggable is disabled.

plugins

MaybeRefOrGetter<PluginDescriptor[]>

An array of plugin descriptors for per-entity plugin configuration. Use Plugin.configure() to create descriptors. For example, Feedback.configure({ feedback: 'clone' }).

modifiers

MaybeRefOrGetter<Modifier[]>

Modifiers to apply to this draggable instance.

sensors

MaybeRefOrGetter<Sensor[]>

Sensors to use for this draggable instance.

data

MaybeRefOrGetter<Data>

Custom data to attach to this draggable instance.

Output

Whether this element is currently being dragged (visually).

Whether this element is in the process of being dropped (animating to final position).

Whether this element is the source of the current drag operation.

The underlying Draggable instance.

Guides

Rendering a drag overlay

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

<script setup>
import {ref} from 'vue';
import {DragDropProvider, DragOverlay, useDraggable} from '@dnd-kit/vue';

const element = ref(null);
useDraggable({id: 'draggable', element});
</script>

<template>
  <DragDropProvider>
    <button ref="element">Draggable</button>
    <DragOverlay>
      <div>I will be rendered while dragging...</div>
    </DragOverlay>
  </DragDropProvider>
</template>

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.

To render different content depending on which element is being dragged, use the scoped slot to access the drag source:

<script setup>
import {DragDropProvider, DragOverlay} from '@dnd-kit/vue';
</script>

<template>
  <DragDropProvider>
    <Draggable id="foo" />
    <Draggable id="bar" />
    <DragOverlay>
      <template #default="{ source }">
        <div>Dragging {{ source.id }}</div>
      </template>
    </DragOverlay>
  </DragDropProvider>
</template>