Components
DragDropProvider
The DragDropProvider component creates and manages a DragDropManager instance for your Vue application.
Overview
The DragDropProvider component is the root component for drag and drop interactions. It creates a DragDropManager instance and makes it available to all descendant components via Vue’s provide/inject system.
Usage
<script setup>
import {DragDropProvider} from '@dnd-kit/vue';
</script>
<template>
<DragDropProvider @dragEnd="handleDragEnd">
<!-- Your draggable and droppable elements -->
</DragDropProvider>
</template>Events
The DragDropProvider emits Vue events for all drag and drop lifecycle stages:
| Event | Description |
|---|---|
@beforeDragStart | Fired before a drag operation begins. Can be used to prepare state. |
@dragStart | Fired when a drag operation starts. |
@dragMove | Fired when the dragged element moves. |
@dragOver | Fired when the dragged element moves over a droppable target. Call event.preventDefault() to prevent the default behavior of plugins that respond to this event. |
@dragEnd | Fired when a drag operation ends (dropped or canceled). |
@collision | Fired when collisions are detected between draggable and droppable elements. |
Props
An optional externally created DragDropManager instance. If not provided, one will be created automatically.
Plugins to use. Defaults to the default preset. Pass an array to replace defaults, or a function to extend them.
// Add a plugin alongside defaults
:plugins="(defaults) => [...defaults, MyPlugin]"
// Replace defaults entirely
:plugins="[MyPlugin]"Sensors to use. Defaults to PointerSensor and KeyboardSensor. Pass an array to replace defaults, or a function to extend them.
Modifiers to apply to drag operations. Pass an array to replace defaults, or a function to extend them.