Vue Composables

Complete API reference for dnd-kit Vue composables

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.

data · MaybeRefOrGetter<T>

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

draggable · Readonly<Ref<Draggable>>

The draggable instance (readonly)

isDragging · ComputedRef<boolean>

Whether this element is currently being dragged

isDropping · ComputedRef<boolean>

Whether this element is currently dropping

isDragSource · ComputedRef<boolean>

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 · MaybeRefOrGetter<string>

Type identifier for this droppable

disabled · MaybeRefOrGetter<boolean>

Whether the droppable is disabled

data · MaybeRefOrGetter<T>

Custom data to attach to the droppable instance

collisionDetector · MaybeRefOrGetter<CollisionDetector>

Custom collision detection algorithm

Returns

droppable · Readonly<Ref<Droppable>>

The droppable instance (readonly)

isDropTarget · ComputedRef<boolean>

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

collisionPriority · MaybeRefOrGetter<number>

Priority for collision detection when multiple droppables overlap

Returns

sortable · Readonly<Ref<Sortable>>

The sortable instance (readonly)

isDragging · ComputedRef<boolean>

Whether this element is currently being dragged

isDropping · ComputedRef<boolean>

Whether this element is currently dropping

isDragSource · ComputedRef<boolean>

Whether this element is the source of the current drag operation

isDropTarget · ComputedRef<boolean>

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

source · Draggable | null

The source draggable element of the current operation

target · Droppable | null

The current drop target

status · DragOperationStatus

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

manager · Ref<DragDropManager>

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

proxy · ComputedRef<T>

A computed ref that proxies access to the target and triggers reactivity on nested signal reads