useDraggable
Make an element draggable.
Usage
<script setup>
import { ref } from 'vue';
import { useDraggable } from '@dnd-kit/vue';
const draggableRef = ref();
const { draggable, isDragging, isDropping, isDragSource } = useDraggable({
id: 'draggable-1',
element: draggableRef,
data: { type: 'card' }
});
</script>
<template>
<div ref="draggableRef" :class="{ dragging: isDragging }">
Drag me
</div>
</template>
Parameters
id
MaybeRefOrGetter<string | number>
required
Unique identifier for the draggable element
element
MaybeRefOrGetter<MaybeElement>
The DOM element to make draggable. Can be a ref, component instance, or raw element.
handle
MaybeRefOrGetter<MaybeElement>
Optional drag handle element. If provided, only this element can initiate drag.
Custom data to attach to the draggable instance
disabled
MaybeRefOrGetter<boolean>
Whether the draggable is disabled
alignment
MaybeRefOrGetter<Alignment>
Alignment configuration for the draggable element
plugins
MaybeRefOrGetter<Plugin[]>
Array of plugins to apply to this draggable
modifiers
MaybeRefOrGetter<Modifier[]>
Array of modifiers to transform drag coordinates
sensors
MaybeRefOrGetter<Sensor[]>
Custom sensors for this draggable instance
Returns
The draggable instance (readonly)
Whether this element is currently being dragged
Whether this element is currently dropping
Whether this element is the source of the current drag operation
useDroppable
Make an element droppable.
Usage
<script setup>
import { ref } from 'vue';
import { useDroppable } from '@dnd-kit/vue';
const droppableRef = ref();
const { droppable, isDropTarget } = useDroppable({
id: 'droppable-1',
element: droppableRef,
accept: ['card']
});
</script>
<template>
<div ref="droppableRef" :class="{ 'drop-target': isDropTarget }">
Drop here
</div>
</template>
Parameters
id
MaybeRefOrGetter<string | number>
required
Unique identifier for the droppable element
element
MaybeRefOrGetter<MaybeElement>
The DOM element to make droppable
accept
MaybeRefOrGetter<string[]>
Array of draggable types this droppable accepts
Type identifier for this droppable
disabled
MaybeRefOrGetter<boolean>
Whether the droppable is disabled
Custom data to attach to the droppable instance
collisionDetector
MaybeRefOrGetter<CollisionDetector>
Custom collision detection algorithm
Returns
The droppable instance (readonly)
Whether this element is currently a valid drop target
useSortable
Combine draggable and droppable functionality for sortable items.
Usage
<script setup>
import { ref } from 'vue';
import { useSortable } from '@dnd-kit/vue/sortable';
const sortableRef = ref();
const {
sortable,
isDragging,
isDropTarget,
isDragSource,
isDropping
} = useSortable({
id: 'item-1',
element: sortableRef,
group: 'list',
index: 0
});
</script>
<template>
<div
ref="sortableRef"
:class="{
dragging: isDragging,
'drop-target': isDropTarget
}"
>
Sortable item
</div>
</template>
Parameters
Includes all parameters from useDraggable and useDroppable, plus:
group
MaybeRefOrGetter<string | number>
required
The sortable group this item belongs to
index
MaybeRefOrGetter<number>
required
The current index of this item in the sortable group
source
MaybeRefOrGetter<MaybeElement>
Optional source element for the sortable
target
MaybeRefOrGetter<MaybeElement>
Optional target element for drop positioning
transition
MaybeRefOrGetter<Transition>
Transition configuration for sortable animations
Priority for collision detection when multiple droppables overlap
Returns
The sortable instance (readonly)
Whether this element is currently being dragged
Whether this element is currently dropping
Whether this element is the source of the current drag operation
Whether this element is currently a valid drop target
useDragDropMonitor
Listen to drag and drop events.
Usage
<script setup>
import { useDragDropMonitor } from '@dnd-kit/vue';
useDragDropMonitor({
onDragStart(event) {
console.log('Drag started:', event.operation.source);
},
onDragMove(event) {
console.log('Dragging:', event.operation.shape.current);
},
onDragEnd(event) {
console.log('Drag ended:', event.operation);
},
onBeforeDragStart(event) {
// Can modify or cancel the drag operation
if (shouldCancel) {
event.preventDefault();
}
}
});
</script>
Parameters
onBeforeDragStart
(event: BeforeDragStartEvent) => void
Called before drag starts. Can cancel the operation.
onDragStart
(event: DragStartEvent) => void
Called when drag operation starts
onDragMove
(event: DragMoveEvent) => void
Called when the dragged element moves
onDragOver
(event: DragOverEvent) => void
Called when dragging over a droppable
onDragEnd
(event: DragEndEvent) => void
Called when drag operation ends
onDragCancel
(event: DragCancelEvent) => void
Called when drag operation is cancelled
useDragOperation
Access the current drag operation state.
Usage
<script setup>
import { useDragOperation } from '@dnd-kit/vue';
const dragOperation = useDragOperation();
</script>
<template>
<div v-if="dragOperation.source">
Currently dragging: {{ dragOperation.source.id }}
</div>
<div v-if="dragOperation.target">
Over: {{ dragOperation.target.id }}
</div>
<div>
Status: {{ dragOperation.status.idle ? 'idle' : 'active' }}
</div>
</template>
Returns
The source draggable element of the current operation
The status of the drag operation (idle, dragging, dropping)
useDragDropManager
Access the drag drop manager instance.
Usage
<script setup>
import { useDragDropManager } from '@dnd-kit/vue';
const manager = useDragDropManager();
// Access manager properties
const draggables = manager.value.registry.draggables;
const droppables = manager.value.registry.droppables;
</script>
Returns
The drag drop manager instance
useDeepSignal
Create a deep reactive proxy for signal-based objects.
Usage
<script setup>
import { computed } from 'vue';
import { useDeepSignal } from '@dnd-kit/vue/composables';
const source = computed(() => manager.value.dragOperation);
const tracked = useDeepSignal(source);
// Accessing nested signal properties triggers reactivity
const sourceId = tracked.value.source?.id;
</script>
Parameters
target
MaybeRefOrGetter<T>
required
The target object to track (typically contains signals)
Returns
A computed ref that proxies access to the target and triggers reactivity on nested signal reads