功能強大的vue.js拖拽組件安裝應用

更新時間：2023年06月06日 14:49:32 作者：AshleyLv

這篇文章主要為大家介紹了功能強大的vue.js拖拽組件安裝應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

介紹

vue-slicksort -- 這是一個功能強大的可拖拽的vue.js組件。它可以自動滾動，鎖定坐標系。支持拖拽時，流暢的動畫效果?？梢灾С炙剑怪被蛘呔W(wǎng)格的拖拽。支持觸摸。

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

組件參數(shù)

Property	Type	Default	Description
value	Array	-	列表的內(nèi)容
axis	String	y	列表元素可以被橫向拖拽，縱向拖拽還是網(wǎng)格拖拽。用x,y,xy來表示。
lockAxis	String	-	用于排序時在坐標系中鎖定元素的移動
helperClass	String	-	helper的自定義樣式類
transitionDuration	Number	300	元素移動動畫的持續(xù)時間
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	-	在拖拽開始前這個方法將被調(diào)用
getHelperDimensions	Function	-	可選方法({node, index, collection}),用于返回SortableHelper的計算尺寸