ContextQMD
Back to Dnd Kit

useDroppable

apps/docs/vue/composables/use-droppable.mdx

latest3.5 KB
Original Source

import {CodeSandbox} from '/snippets/sandbox.mdx'; import {draggableStyles, droppableStyles} from '/snippets/code.mdx';

<CodeSandbox template="vue" files={{ 'src/App.vue': {code: app, hidden: true}, 'src/Draggable.vue': {code: draggableCode, hidden: true}, 'src/Droppable.vue': {code, active: true}, 'src/styles.css': {code: draggableStyles + '\n\n' + droppableStyles + '\n\n' + containerStyles, hidden: true}, }} height={300} previewHeight={400} hero />

Usage

The useDroppable composable requires a unique id and an element template ref.

vue
<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

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

Output

<ResponseField name="isDropTarget" type="ComputedRef<boolean>"> Whether this element is currently a drop target (a draggable is hovering over it). </ResponseField> <ResponseField name="droppable" type="ShallowReadonly<Ref<Droppable>>"> The underlying `Droppable` instance. </ResponseField>

export const app = `

<script setup> import { ref } from 'vue'; import { DragDropProvider } from '@dnd-kit/vue'; import Draggable from './Draggable.vue'; import Droppable from './Droppable.vue'; import './styles.css'; const parent = ref(undefined); function onDragEnd(event) { if (event.canceled) return; parent.value = event.operation.target?.id; } </script> <template> <DragDropProvider @dragEnd="onDragEnd"> <div class="container"> <Draggable v-if="parent == null" /> <Droppable> <Draggable v-if="parent === 'droppable'" /> </Droppable> </div> </DragDropProvider> </template> `.trim();

export const draggableCode = `

<script setup> import { ref } from 'vue'; import { useDraggable } from '@dnd-kit/vue'; const element = ref(null); useDraggable({ id: 'draggable', element }); </script> <template> <button ref="element" class="btn">draggable</button> </template> `.trim();

export const code = `

<script setup> import { ref } from 'vue'; import { useDroppable } from '@dnd-kit/vue'; const element = ref(null); const { isDropTarget } = useDroppable({ id: 'droppable', element }); </script> <template> <div ref="element" :class="['droppable', { active: isDropTarget }]"> <slot /> </div> </template> `.trim();

export const containerStyles = .container { display: grid; grid-template-columns: 2fr 1fr; grid-gap: 20px; align-items: center; max-width: 700px; margin: 0 auto; }.trim();