Vue Sortable 
Easily add drag-and-drop sorting to your Vue.js applications without jQuery, using the v-sortable directive, a thin wrapper for the minimalist RubaXa/SortableJS library.
View Live Demo & Docs
Installation
NPM
npm install vue-sortableSetup
import Vue from 'vue' import Sortable from 'vue-sortable' Vue.use(Sortable)Browser Globals
If you aren't using a build system, you probably just want to include a <script> tag and keep things simple. unpkg.com serves as a CDN for NPM projects. You can grab vue-sortable from unpkg in a couple ways:
<script src="https://unpkg.com/[email protected]"></script> # use a specific version<script src="https://unpkg.com/vue-sortable@latest"></script> # use the latest version
Note that you will need to include RubaXa/Sortable & Vue before including vue-sortable.
<!DOCTYPE html> <html> <head> <!-- VueJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> <!-- SortableJS --> <script src="https://unpkg.com/[email protected]"></script> <!-- VueSortable --> <script src="https://unpkg.com/[email protected]"></script> </head> <body> <ul v-sortable> <li>Foo</li> <li>Bar</li> <li>Baz</li> </ul> <script> new Vue({ el: 'body' }); </script> </body> </html>Common Use Cases
Update Source Data Order
The below implementation will update the order of the source data after an item is sorted using the sortable onUpdate callback.
new Vue({ el: 'body', data: { list: ['Foo', 'Bar', 'Baz'] }, methods: { onUpdate: function (event) { this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0]) } } }); <ul v-sortable="{ onUpdate: onUpdate }"> <li v-for="item in list">{{ item }}</li> </ul> Contributing
I'd like to keep this directive as simple as possible, but if there's something you'd like to see added feel free to submit a PR.
The plugin is built using the vue-cli webpack-simple template.
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for demo site npm run buildFor detailed explanation on how things work, consult the docs for vue-loader.
