vue项目拖拽排序

推荐一个前端组件库：轮子工厂

我用的是vue-slicksort拖拽组件，这是一个功能强大的可拖拽的vue.js组件。 它可以自动滚动，锁定坐标系。支持拖拽时，流畅的动画效果。可以支持水平，垂直或者网格的拖拽。支持触摸。 支持IE10+ 以及谷歌，搜狗等主流浏览器

安装

• 通过npm安装 npm install vue-slicksort --save
• 通过yarn安装 yarn add vue-slicksort

插件引用

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

使用组件

• 自定义使用组件方式

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)
});

• 该插件也提供的预构建的组件来实现mixins

import { SlickList, SlickItem } from 'vue-slicksort';

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