分享一個功能強大的vue.js拖拽組件

介紹

vue-slicksort -- 這是一個功能強大的可拖拽的vue.js組件。 它能夠自動滾動，鎖定座標系。支持拖拽時，流暢的動畫效果。能夠支持水平，垂直或者網格的拖拽。支持觸摸。

DEMO

安裝

經過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;

在你的vue文件中這樣引用

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

組件參數

Property	Type	Default	Description
value	Array	-	列表的內容
axis	String	y	列表元素能夠被橫向拖拽，縱向拖拽仍是網格拖拽。用x,y,xy來表示。
lockAxis	String	-	用於排序時在座標系中鎖定元素的移動
helperClass	String	-	helper的自定義樣式類
transitionDuration	Number	300	元素移動動畫的持續時間
pressDelay	Number	0	若是須要當元素被按下一段時間再容許拖拽，能夠設置這個屬性
pressThreshold	Number	5	移動容許被忽略的閾值，單位是像素
distance	Number	0	若是須要在拖拽出必定距離以後才被識別爲正在拖拽的元素，能夠設置這個屬性
useDragHandle	Boolean	false	若是使用HandleDirective，設置爲true
useWindowAsScrollContainer	Boolean	false	是否設置window爲可滾動的容器
hideSortableGhost	Boolean	false	是否設置window爲可滾動的容器
useWindowAsScrollContainer	Boolean	true	是否自動隱藏ghost元素
lockToContainerEdges	Boolean	false	是否對正在拖拽的元素鎖定容器邊緣
lockOffset	String	50%	對正在拖拽的元素鎖定容器邊緣的偏移量
shouldCancelStart	Function	-	在拖拽開始前這個方法將被調用
getHelperDimensions	Function	-	可選方法({node, index, collection}),用於返回SortableHelper的計算尺寸

輪子工廠--一個分享vue,angular優秀組件的網站