Vue.js Drag And Drop Component Example

Nov 29, 2020

.

Admin

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 vue-draggable-next.you 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

//or

yarn add vue-draggable-next

Example

<template>

<div class="flex m-10">

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

<div

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

v-for="element in list"

:key="element.name"

>

{{ element.name }}

</div>

</draggable>

</div>

</template>

<script>

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) {

console.log(event)

},

},

})

</script>

It will help you....

#Vue.Js