Slick Sortable List For Vue

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:

Slick Sortable List For Vue

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
Tags:

One Response

  1. Kernet Bis February 11, 2020

Add Comment