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