arkdevuk/vue2-sortable

A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable based on https://github.com/sagalbot/vue-sortable

vue2-sortable

Easily add drag-and-drop sorting to your Vue.js applications using the v-sortable2 directive, a thin wrapper for the minimalist RubaXa/SortableJS library. Based on sagalbot/vue-sortable

Installation

NPM

https://www.npmjs.com/package/vue2-sortable

npm install vue2-sortable

Setup

import Vue from 'vue'
import Sortable2 from 'vue2-sortable'

Vue.use(Sortable2)

Common Use Cases

Update Source Data Order

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-sortable2="{ onUpdate: onUpdate }">
    <li v-for="item in list">{{ item }}</li>
 </ul>

Contributing

Feel free to fork or PR :)