Create websites with TailwindCSS
Start building the next great SAAS
Alpine & Tailwind UI Library
Plug'n Play Authentication for Laravel
Create website designs with AI
Blog platform for developers
Build a simple static website
21-day program to build a SAAS
Upgrade your account to get access to all content.
Created on June 11th, 2017
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.
Comments (0)