Vue.js Drag And Drop Component Example

Vue.Js

Nicesnippets

3953

29-11-2020


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....


Recommended Posts