Vue 3 dragNdrop is an advanced drag and drop component for Vue.js 3+. Supports copy, transition group, nested elements, Vuex, and more. Based on the sortable JavaScript library.

drag and drop in html, html drag and drop example, drag and drop ui, drag and drop in javascript drag and drop vuetify, vue draggable example, vue drag and drop list

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-draggable-next

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

1. Import the component.

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

2. Add drag and drop the element 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 select the list to be sorted by drag and drop.

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

4. All props are default.

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

Drag And Drop Component For Vue 3, vue draggable next Plugin/Github, vue drag event, vue draggable npm, vue draggable change event, vue draggable div

See Demo And Download

Official Website(anish2690): Click Here

This superior jQuery/javascript plugin is developed by anish2690. For extra Advanced usage, please go to the official website.