Vue 可拖拽组件Vue Smooth DnD的使用详解

下面是“Vue 可拖拽组件Vue Smooth DnD的使用详解”的完整攻略。

简介

Vue Smooth DnD是一个Vue插件，可以让开发者轻松地实现拖拽效果，并具有很高的自定义性。

安装

可以通过npm来安装Vue Smooth DnD，命令如下：

npm install vuedraggable

安装完成后，还需要在Vue项目中引入该插件：

import draggable from 'vuedraggable'
Vue.component('draggable', draggable)

基本使用

Vue Smooth DnD的最基本使用方法如下：

<draggable v-model="list">
  <div v-for="item in list">{{item}}</div>
</draggable>

上述代码中，list是一个数组，draggable就是Vue Smooth DnD提供的拖拽组件，v-for用于渲染数据，v-model将draggable组件的状态与list数组绑定起来。

自定义拖拽效果

Vue Smooth DnD提供了很多自定义选项，可以让我们轻松地实现各种各样的拖拽效果。例如，可以通过handle选项来设置拖拽的把手，如下所示：

<draggable v-model="list" :handle=".drag-handle">
  <div v-for="(item, index) in list" :key="index">
    <div class="drag-handle">///</div>{{item}}
  </div>
</draggable>

上述代码中，通过handle选项将drag-handle类指定为拖拽把手，这样，用户只有在拖拽把手上拖拽才能改变列表项的顺序。

示例说明

以下是具有自定义拖拽效果的示例代码：

<template>
  <draggable v-model="list" :options="{handle: '.drag-handle'}">
    <div v-for="(item, index) in list" :key="index">
      <div class="drag-handle">|||</div>{{item}}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: ['Apple', 'Banana', 'Orange']
    }
  }
}
</script>

<style scoped>
.drag-handle {
  float: left;
  margin-right: 10px;
  cursor: move;
}
</style>

上述代码中，通过options选项将drag-handle类指定为拖拽把手，然后通过CSS将drag-handle显示为一个竖条，这样，用户只有在竖条上拖拽才能改变列表项的顺序。

另外一个示例是拖拽到另一个组件时，实现自定义效果。示例代码如下：

<template>
  <div>
    <draggable v-model="list1" class="list" :options="{group: 'people'}">
      <div v-for="(item, index) in list1" :key="index">{{item.name}}</div>
    </draggable>
    <draggable v-model="list2" class="list" :options="{group: 'people'}" @change="onDrop">
      <div v-for="(item, index) in list2" :key="index">{{item.name}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        {name: 'Tom', age: 18},
        {name: 'Jerry', age: 16},
        {name: 'Lucy', age: 20}
      ],
      list2: []
    }
  },
  methods: {
    onDrop(event) {
      console.log(event)
      //可以在这里执行一些自定义操作，例如提示用户等等
    }
  }
}
</script>

<style scoped>
.list {
  border: 1px solid black;
  padding: 10px;
  margin-top: 10px;
  height: 100px;
  overflow: auto;
}
</style>

上述代码中，通过group选项将list1和list2指定为同一组，这样，用户可以从list1中拖拽元素到list2中，同时，在list2上监听change事件，并且在onDrop方法中处理该事件，例如，在控制台上输出拖拽后的信息，也可以进行一些自定义的操作。

以上就是“Vue 可拖拽组件Vue Smooth DnD的使用详解”的完整攻略。