<ul class="list-group" v-sortable>
12 | <li class="list-group-item">Foo</li>
13 | <li class="list-group-item">Bar</li>
14 | <li class="list-group-item">Baz</li>
15 | </ul>
16 | <ul class="list-group" v-sortable="{ handle: '.handle' }">
12 | <li class="list-group-item">Foo <i class="handle"></i></li>
13 | <li class="list-group-item">Bar <i class="handle"></i></li>
14 | <li class="list-group-item">Baz <i class="handle"></i></li>
15 | </ul>
16 | <template>
12 | <ul class="list-group" v-sortable="options">
13 | <li class="list-group-item">Foo <i class="handle"></i></li>
14 | <li class="list-group-item disabled">Bar <i class="handle"></i></li>
15 | <li class="list-group-item">Baz <i class="handle"></i></li>
16 | </ul>
17 | </template>
18 |
19 | <script>
20 | export default {
21 | data() {
22 | return {
23 | options: {
24 | handle: '.handle',
25 | filter: '.disabled'
26 | }
27 | }
28 | }
29 | }
30 | </script>
31 | Easily add drag-and-drop sorting to your Vue.js applications without jQuery, using the 71 | v-sortable directive, a thin wrapper for the minimalist 72 | SortableJS library.
73 | 74 | View on GitHub 75 |npm install vue-sortable
86 |
87 | import Vue from 'vue'
89 | import Sortable from 'vue-sortable'
90 |
91 | Vue.use(Sortable)
92 |
93 | Note that if you are not compiling Vue yourself, you just need to include
94 | <script src="path/to/vue-sortable.js>, and the plugin will be attached to the window at
95 | window.vSortable. In this case, you don't need to call
96 | Vue.use().
If you need to access the sortable instance itself, you can do so by providing an identifier argument to the directive with the : syntax.
In this example, you could access the sortable instance from within your vm via this.sortable.list.
<ul class="list-group" v-sortable:list>
111 | <li class="list-group-item">Foo</li>
112 | <li class="list-group-item">Bar</li>
113 | <li class="list-group-item">Baz</li>
114 | </ul>
115 | Any arguments that can be passed to
122 | new Sortable(el, {}) can also be passed to the directive using an object literal. Check the
123 | Sortable docs for a complete list of arguments. In this example a custom drag handle has been set.
124 |
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
128 | .disabled items.
<template>\n<ul class="list-group" v-sortable="options">\n <li class="list-group-item">Foo <i class="handle"></i></li>\n <li class="list-group-item disabled">Bar <i class="handle"></i></li>\n <li class="list-group-item">Baz <i class="handle"></i></li>\n</ul>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n options: {\n handle: \'.handle\',\n filter: \'.disabled\'\n }\n }\n }\n}\n</script> <ul class="list-group" v-sortable>\n <li class="list-group-item">Foo</li>\n <li class="list-group-item">Bar</li>\n <li class="list-group-item">Baz</li>\n</ul> <ul class="list-group" v-sortable="{ handle: \'.handle\' }">\n <li class="list-group-item">Foo <i class="handle"></i></li>\n <li class="list-group-item">Bar <i class="handle"></i></li>\n <li class="list-group-item">Baz <i class="handle"></i></li>\n</ul>