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.
npm install vue-sortableSetup
import Vue from 'vue'
import Sortable from 'vue-sortable'
Vue.use(Sortable)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/vue-sortable@0.1.3"></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/sortablejs@1.4.2"></script>
<!-- VueSortable -->
<script src="https://unpkg.com/vue-sortable@0.1.3"></script>
</head>
<body>
<ul v-sortable>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
<script>
new Vue({
el: 'body'
});
</script>
</body>
</html>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>
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.