Skip to main content

​
Usage

The useDroppable composable requires a unique id and an element template ref. 
<script setup>
import {ref} from 'vue';
import {useDroppable} from '@dnd-kit/vue';

const element = ref(null);
const {isDropTarget} = useDroppable({id: 'my-droppable', element});
</script>

<template>
  <div ref="element" :data-highlight="isDropTarget">
    Drop here
  </div>
</template>

​
Input

​
id
MaybeRefOrGetter<UniqueIdentifier>
required
A unique identifier for this droppable instance.
​
element
MaybeRefOrGetter<HTMLElement | null>
required
A template ref pointing to the droppable element.
​
accept
MaybeRefOrGetter<string | string[]>
The types of draggable elements this droppable accepts.
​
type
MaybeRefOrGetter<string>
The type of this droppable element.
​
collisionDetector
MaybeRefOrGetter<CollisionDetector>
A custom collision detection algorithm.
​
disabled
MaybeRefOrGetter<boolean>
Whether the droppable is disabled.
​
data
MaybeRefOrGetter<Data>
Custom data to attach to this droppable instance.

​
Output

​
isDropTarget
ComputedRef<boolean>
Whether this element is currently a drop target (a draggable is hovering over it).
​
droppable
ShallowReadonly<Ref<Droppable>>
The underlying Droppable instance.