useDroppable Composable - Vue

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

MaybeRefOrGetter<UniqueIdentifier>

required

A unique identifier for this droppable instance.

element

MaybeRefOrGetter<HTMLElement | null>

required

A template ref pointing to the droppable element.

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

Whether this element is currently a drop target (a draggable is hovering over it).

The underlying Droppable instance.