A set of vue mixins to turn any list into an animated, touch-friendly, sortable list.
Features:
v-model
Compatible – Make any array editable with thev-model
standard- Mixin Components – Integrates with your existing components
- Drag handle, auto-scrolling, locked axis, events, and more!
- Super smooth animations – Chasing the 60FPS dream
- Horizontal lists, vertical lists, or a grid ↔ ↕ ⤡
- Touch support
How to use:
1. Import and register the Slicksort plugin.
import { plugin as Slicksort } from 'vue-slicksort'; const app = createApp(); app.use(Slicksort);
2. Create a basic sortable list.
<template> <SlickList axis="y" v-model:list="fruits"> <SlickItem v-for="(fruit, i) in fruits" :key="fruit" :index="i"> {{ fruit }} </SlickItem> </SlickList> </template>
<script> import { SlickList, SlickItem } from 'vue-slicksort'; export default { components: { SlickList, SlickItem, }, data() { return { fruits: ['Apples', 'Bananas' /* etc. */], }; }, }; </script>
3. You can also drag items between multiple lists.
<SlickList v-model:list="fruits" group="produce"> <!-- ... --> </SlickList> <SlickList v-model:list="veggies" group="produce"> <!-- ... --> </SlickList>
Preview:
Changelog:
v2.0.5 (02/12/2023)
- Major update
v2.0.3 (11/26/2022)
- Major update
v2.0.2 (02/13/2021)
- Major update
v1.2.0 (02/13/2021)
- feat: tag props on SlickList and SlickItem components
- fix: Dragging broken on Android when distance property is set fix: node helper not clean
- fix: add event listeners in passive mode fix: stopPropogation on click events
- fix: .d.ts types
- docs: Chinese documentation
- chore: lots of dependencies
Download Details:
Author: Jexordexan
Live Demo: http://jexordexan.github.io/vue-slicksort/
Download Link: https://github.com/Jexordexan/vue-slicksort/archive/master.zip
Official Website: https://github.com/Jexordexan/vue-slicksort
Install & Download:
# Yarn
$ yarn add vue-slicksort
# NPM
$ npm install vue-slicksort --save
Thanks!