Slick Sortable List For Vue

Install & Download:

# Yarn
$ yarn add vue-slicksort
# NPM
$ npm install vue-slicksort --save

Description:

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 the v-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