Vue.js Drag And Drop Component Example




Vue.js Drag And Drop Component Example

Hi Guys,

Today,I will learn you how to implement drag and drop in vue.js. we will create drag and drop component for requirement install can easyliy create vue.js drag and drop component.

Now, I will give you full example for simply display drag and drop component using vue.js as bellow.

Install Package

In this step i will install vue-draggable-next Package for command.

npm install vue-draggable-next


yarn add vue-draggable-next



<div class="flex m-10">

<draggable class="dragArea list-group w-full" :list="list" @change="log">


class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"

v-for="element in list"



{{ }}






import { defineComponent } from 'vue'

import { VueDraggableNext } from 'vue-draggable-next'

export default defineComponent({

components: {

draggable: VueDraggableNext,


data() {

return {

enabled: true,

list: [

{ name: 'Dharmik', id: 1 },

{ name: 'Mehul', id: 2 },

{ name: 'savan', id: 3 },

{ name: 'piyush', id: 4 },


dragging: false,



methods: {

log(event) {






It will help you....