Vue.Draggable is a component that allows drag-and-drop and synchronization with view model arrays in Vue.js 2.0 and above or as a directive for Vue.js 1.0.  Sortable lists play a crucial role in the  improving the look and feel of the applications. It is a directive in Vue.js to easily add drag-and-drop sorting to the application. You can install Vue.Draggable using NPM or Yarn.

# Yarn
$ yarn add vuedraggable
# NPM
$ npm install vuedraggable –save

The usage is also simple. If you want to make a list sortable, wrap it in a draggable component.

<template>
  <div>
   
<h2>Draggable Wrapper</h2>
    <draggable v-model="exampleList">
      <div v-for="text in exampleList" :key="text"></div>
    </draggable>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable
  },
 
  data() {
    return {
      exampleList: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
        'Item 5'
      ]
    }
  }
}
</script>