Drag And Drop Component For Vue 3

Install & Download:

# Yarn
$ yarn add vue-draggable-next
# NPM
$ npm i vue-draggable-next --save

Description:

An advanced drag and drop component for Vue.js 3+.

Supports clone, transition group, nested items, Vuex, and much more.

Based on the Sortable JavaScript library.

Basic usage:

1. Import the component.

import { defineComponent } from ‘vue’
import { VueDraggableNext } from ‘vue-draggable-next’

2. Add the drag and drop component to the template.

<draggable class="dragArea list-group w-full" :list="list" @change="log">
  <div
    class="list-styles"
    v-for="element in list"
    :key="element.name"
  >
    {{ element.name }}
  </div>
</draggable>

3. Register the component and define the list to be sorted via drag and drop.

export default defineComponent({
  components: {
    draggable: VueDraggableNext,
  },
  data() {
    return {
      enabled: true,
      list: [
        { name: 'vue', id: 1 },
        { name: 'script', id: 2 },
        { name: 'com', id: 3 },
      ],
      dragging: false,
    }
  },
  methods: {
    log(event) {
      console.log(event)
    },
  },
})

4. All default props.

options: Object,
list: {
  type: Array,
  required: false,
  default: null,
},
noTransitionOnDrag: {
  type: Boolean,
  default: false,
},
clone: {
  type: Function,
  default: (original: any) => {
    return original
  },
},
tag: {
  type: String,
  default: 'div',
},
move: {
  type: Function,
  default: null,
},
componentData: {
  type: Object,
  required: false,
  default: null,
},
component: {
  type: String,
  default: null,
},
modelValue: {
  type: Array,
  required: false,
  default: null,
},