Scribd
Upload
42 views

Vue - Js Sortable: Installation & Usage

Vue.js Sortable allows adding drag-and-drop sorting to Vue.js applications without jQuery using the v-sortable directive. It is a thin wrapper for the SortableJS library that can be installed via NPM. The directive supports passing SortableJS options to customize behavior like setting a custom drag handle. It provides basic drag-and-drop sorting of list items out of the box and allows further customization.

Uploaded by

Luis Feijoo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Vue - Js Sortable: Installation & Usage

Vue.js Sortable allows adding drag-and-drop sorting to Vue.js applications without jQuery using the v-sortable directive. It is a thin wrapper for the SortableJS library that can be installed via NPM. The directive supports passing SortableJS options to customize behavior like setting a custom drag handle. It provides basic drag-and-drop sorting of list items out of the box and allows further customization.

Uploaded by

Luis Feijoo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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)

You might also like