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
(https://github.com/RubaXa/Sortable) library.

View on GitHub (https://github.com/sagalbot/vue-sortable)

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

Foo

Bar

Baz

<ul class="list-group" v-sortable>

<li class="list-group-item">Foo</li>
<li class="list-group-item">Bar</li>
<li class="list-group-item">Baz</li>
</ul>

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 (https://github.com/RubaXa/Sortable#options) for a complete list of arguments. In this example a custom drag
handle has been set.

Foo 

Bar 
 Baz 

<ul class="list-group" v-sortable="{ handle: '.handle' }">

<li class="list-group-item">Foo <i class="handle"></i></li>
<li class="list-group-item">Bar <i class="handle"></i></li>
<li class="list-group-item">Baz <i class="handle"></i></li>
</ul>

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.

Foo 

Bar 

Baz 

<template>
<ul class="list-group" v-sortable="options">
<li class="list-group-item">Foo <i class="handle"></i></li>
<li class="list-group-item disabled">Bar <i class="handle"></i></li>
<li class="list-group-item">Baz <i class="handle"></i></li>
</ul>
</template>

<script>
export default {
data() {
return {
options: {
handle: '.handle',
filter: '.disabled'
}
}
}
}
</script>

Free to Use Under The MIT License (MIT) | Created by @sagalbot (http://github.com/sagalbot)