Vue3DragNDrop

Vue3DragNDrop is a Vue 3 library that enables drag and drop functionality within lists, allowing for both reordering and swapping of elements.

Features

• Drag and drop elements in the list and reordering.
• Drag and drop to swap the elements.

NPM

npm install vue3-drag-n-drop

Importing library

You can import the library in your project using the following:

import { Draggable } from "vue3-drag-n-drop";

Usage

Pass in the array to v-model (items in the given example). Handle the UI by making a use of v-slot.

  <Draggable
    v-model="items"
    class="container"
    @drag-start="handleDragStart"
    @drag-over="handleDragOver"
    @drop="handleDrop"
  >
    <template v-slot="{ item }">
      <img :src="item.src" alt="item" width="200" height="200" />
    </template>
  </Draggable>

Props

• modelValue: (to be passed in v-model): (Array) The array of items to be displayed and manipulated through drag and drop.
• reorder: (Boolean, default: true) Enable/disable reordering functionality.
• swap: (Boolean, default: false) Enable/disable swapping functionality.
• class: (String, default: "") Additional CSS class to be applied to the container element.

Events

• dragStart: Emitted when a drag operation starts. Receives the DragEvent and the index of the dragged item.
• dragOver: Emitted when an item is dragged over another item. Receives the DragEvent and the index of the item being dragged over.
• drop: Emitted when an item is dropped. Receives the DragEvent and the index where the item is dropped.
• dragEnd: Emitted when a drag operation ends. Receives the DragEvent and the index of the dragged item.