Vue Draggable

In this episode you will learn how to use the Vue Draggable component: https://github.com/SortableJS/Vue.Draggable

The Vue Draggable component allows you to add sortable and draggable functionality to any HTML element. As an example say that we had the following list of elements that printed out an array of groceries:

<ul>
    <li v-for="food in groceries">{{ food }}</li>
</ul>

If we wanted to make these easily sortable we can wrap the list element inside of a draggable element like so:

<ul>
    <draggable v-model="groceries">
        <li v-for="food in groceries">{{ food }}</li>
    </draggable>
</ul>

Now, after including the Vue Draggable componenet in our application, the items above will now become draggable and sortable.

Here is the code that we used inside of the main.js file in this video:

import Vue from 'vue'
import App from './App'
import draggable from 'vuedraggable'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data: {
  	groceries: ['Milk', 'Eggs', 'Cheese']
  },
  components: {
      draggable
  }
})

So, next time you need sortable and draggable functionality you'll need to make sure to include the Vue Draggable component in your application.