https://github.com/arkdevuk/vue2-sortable
A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable based on https://github.com/sagalbot/vue-sortable
https://github.com/arkdevuk/vue2-sortable
javascript sortablejs vuejs vuejs-directive vuejs2 vuejs2-directive
Last synced: about 2 months ago
JSON representation
A lightweight directive for reorderable drag-and-drop lists using RubaXa/Sortable based on https://github.com/sagalbot/vue-sortable
- Host: GitHub
- URL: https://github.com/arkdevuk/vue2-sortable
- Owner: arkdevuk
- Created: 2019-05-16T12:42:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-22T09:50:21.000Z (over 6 years ago)
- Last Synced: 2025-01-31T01:23:47.143Z (11 months ago)
- Topics: javascript, sortablejs, vuejs, vuejs-directive, vuejs2, vuejs2-directive
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://github.com/RubaXa/Sortable) library.
Based on [sagalbot/vue-sortable](https://github.com/sagalbot/vue-sortable)
Installation
--
#### NPM
https://www.npmjs.com/package/vue2-sortable
```bash
npm install vue2-sortable
```
Setup
```javascript
import Vue from 'vue'
import Sortable2 from 'vue2-sortable'
Vue.use(Sortable2)
```
Common Use Cases
--
#### Update Source Data Order
```javascript
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])
}
}
});
```
```html
- {{ item }}
```
Contributing
--
Feel free to fork or PR :)