Vue.js 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 SortableJS library.

View on GitHub

Installation & Usage

Install using NPM
npm install vue-sortable
Setup
import Vue from 'vue'
import Sortable from 'vue-sortable'

Vue.use(Sortable)

Note that if you are not compiling Vue yourself, you just need to include <script src="path/to/vue-sortable.js>, and the plugin will be attached to the window at window.vSortable. In this case, you don't need to call Vue.use().

Examples

Basic

Further Customization

Any arguments that can be passed to new Sortable(el, {}) can also be passed to the directive using an object literal. Check the Sortable docs for a complete list of arguments. In this example a custom drag handle has been set.

If you need to pass multiple arguments, it can be cleaner to bind to an object from your VM data. The same drag handles are applied here, while also disabling drag on .disabled items.