Skip to main content

You will learn

  1. How to make elements draggable
  2. How to set up droppable targets
  3. How to listen to drag and drop events to move elements

​
Overview

The @dnd-kit/vue package provides a set of Vue composables and components that you can use to build drag and drop interfaces. It is a thin Vue integration layer built on top of the vanilla library, so all of the same concepts are shared and can be used. You can refer to the vanilla documentation of these concepts, such as plugins, modifiers, and sensors.
@dnd-kit/vue requires Vue 3.5 or later.

​
Installation

Before getting started, make sure you install @dnd-kit/vue in your project: 
npm install @dnd-kit/vue

​
Making elements draggable

Let’s get started by creating draggable elements that can be dropped over droppable targets. To do so, we’ll be using the useDraggable composable. The useDraggable composable requires a unique id and a template ref for the element. It returns reactive properties like isDragging that you can use in your template. 
<script setup>
import {ref} from 'vue';
import {useDraggable} from '@dnd-kit/vue';

const element = ref(null);
const {isDragging} = useDraggable({id: 'draggable', element});
</script>

<template>
  <button ref="element">
    Draggable
  </button>
</template>

​
Creating droppable elements

In order for our draggable elements to have targets where they can be dropped, we need to create droppable elements. To do so, we’ll be using the useDroppable composable. Like useDraggable, the useDroppable composable requires a unique id and an element ref.
Droppable.vue
<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" :style="{width: '300px', height: '300px'}">
    <slot />
  </div>
</template>

​
Putting all the pieces together

Now that we have both draggable and droppable elements, we can put them together to create a simple drag and drop interaction. We’ll be using the DragDropProvider component to wrap our draggable and droppable elements. This component handles the drag and drop interactions and allows us to listen to drag and drop events.
In Vue, composables like useDraggable and useDroppable must be called in a child component of DragDropProvider, not in the same component that renders the provider. This is because Vue’s provide/inject requires the injection to be from an ancestor component.
<script setup>
import {ref} from 'vue';
import {DragDropProvider} from '@dnd-kit/vue';
import Draggable from './Draggable.vue';
import Droppable from './Droppable.vue';

const parent = ref(undefined);

function onDragEnd(event) {
  if (event.canceled) return;
  parent.value = event.operation.target?.id;
}
</script>

<template>
  <DragDropProvider @dragEnd="onDragEnd">
    <Draggable v-if="parent == null" />

    <Droppable id="droppable">
      <Draggable v-if="parent === 'droppable'" />
    </Droppable>
  </DragDropProvider>
</template>

​
Next steps

Now that you have a basic understanding of how to make elements draggable and droppable, you can explore the concepts covered in this quickstart guide in more detail:

DragDropProvider

Create drag and drop contexts for your draggable and droppable elements.

useDraggable

Learn how to make elements draggable with the useDraggable composable.

useDroppable

Learn how to create droppable targets with the useDroppable composable.

useSortable

Learn how to create sortable elements with the useSortable composable.