A set of vue mixins to turn any list into an animated sortable list

Vue Slicksort

This is a powerful drag-and-drop vue.js component. It can scroll automatically and lock the coordinate system. Support drag and drop, smooth animation. support horizontal, vertical or grid drag and drop.

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

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!
• 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

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;

Alternatively, an UMD build is also available:

<script src="vue-slicksort/dist/umd/vue-slicksort.js"></script>

Usage

Basic Example

import Vue from 'vue';
import { ContainerMixin, ElementMixin } from 'vue-slicksort';

const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list">
      <slot />
    </ul>
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item">{{item}}</li>
  `,
};

const ExampleVue = {
  name: 'Example',
  template: `
    <div class="root">
      <SortableList lockAxis="y" v-model="items">
        <SortableItem v-for="(item, index) in items" :index="index" :key="index" :item="item"/>
      </SortableList>
    </div>
  `,
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8'],
    };
  },
};

const app = new Vue({
  el: '#root',
  render: (h) => h(ExampleVue),
});

That's it! Vue Slicksort does not come with any styles by default, since it's meant to enhance your existing components.

Why should I use this?

There are already a number of great Drag & Drop libraries out there (for instance, vuedraggable is fantastic). If those libraries fit your needs, you should definitely give them a try first. However, most of those libraries rely on the HTML5 Drag & Drop API, which has some severe limitations. For instance, things rapidly become tricky if you need to support touch devices, if you need to lock dragging to an axis, or want to animate the nodes as they're being sorted. Vue Slicksort aims to provide a simple set of component mixins to fill those gaps. If you're looking for a dead-simple, mobile-friendly way to add sortable functionality to your lists, then you're in the right place.

ContainerMixin

Props

* OffsetValue can either be a finite Number or a String made up of a number and a unit (px or %).
Examples: 10 (which is the same as "10px"), "50%"

Events

ElementMixin

Props

GitHub