Drag And Drop Component For Vue 3

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,
},

Preview:

Drag And Drop Component For Vue 3

Changelog:

v2.1.0 (10/10/2021)

  • Feat: Future index support for multiple draggable instance while cloning from between different instances

v2.0.0 (11/07/2020)

  • fix: type definition support

Download Details:

Author: anish2690

Live Demo: https://vue-draggable-next.vercel.app/

Download Link: https://github.com/anish2690/vue-draggable-next/archive/master.zip

Official Website: https://github.com/anish2690/vue-draggable-next

Install & Download:

# Yarn
$ yarn add vue-draggable-next

# NPM
$ npm i vue-draggable-next --save

You Might Be Interested In:

Add Comment