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

manager · DragDropManager

An optional externally created DragDropManager instance. If not provided, one will be created automatically.

plugins · Plugin[] | (defaults: Plugin[]) => Plugin[]

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 · Sensor[] | (defaults: Sensor[]) => Sensor[]

Sensors to use. Defaults to PointerSensor and KeyboardSensor. Pass an array to replace defaults, or a function to extend them.

modifiers · Modifier[] | (defaults: Modifier[]) => Modifier[]

Modifiers to apply to drag operations. Pass an array to replace defaults, or a function to extend them.