29-Nov-2020
.
Admin
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