A set of vue mixins to turn any list into an animated, touch-friendly, sortable list ✌️

Last update: Aug 12, 2022

Vue Slicksort 🖖

Slicksort logo

A set of component mixins to turn any list into an animated, touch-friendly, sortable list. Based on react-sortable-hoc by [@clauderic]

npm version npm downloads license gzip size

Examples available here: https://jexordexan.github.io/vue-slicksort/

中文文档

Features

  • v-model Compatible – Make any array editable with the v-model standard
  • Mixin Components – Integrates with your existing components
  • Standalone Components – Easy to use components for slick lists
  • Drag handle, auto-scrolling, locked axis, events, and more!
  • Suuuper smooth animations – Chasing the 60FPS dream 🌈
  • Horizontal lists, vertical lists, or a grid
  • Touch support 👌
  • Oh yeah, and it's DEPENDENCY FREE! 👌

Installation

Using npm:

  $ npm install vue-slicksort --save

Using yarn:

  $ yarn add vue-slicksort

Using a CDN:

<script src="https://unpkg.com/[email protected]/dist/vue-slicksort.min.js">script>

Then, using a module bundler that supports either CommonJS or ES2015 modules, such as webpack:

// Using an ES6 transpiler like Babel
import { ContainerMixin, ElementMixin } from 'vue-slicksort';

// Not using an ES6 transpiler
var slicksort = require('vue-slicksort');
var ContainerMixin = slicksort.ContainerMixin;
var ElementMixin = slicksort.ElementMixin;

If you are loading the package via