一、概述

Vue3 Vuedraggable是一个基于Vue3框架的拖放库，它允许用户快速创建可拖动，可放置和可排序的列表。

二、安装

通过npm进行安装：

npm install vuedraggable --save

引入vuedraggable组件：

import draggable from 'vuedraggable';

三、使用vuedraggable组件

使用vuedraggable组件来创建一个可拖放的列表需要做以下几步：

1. 准备数据

在组件中定义一个数组作为列表数据源：

data() {
  return {
    list: ['one', 'two', 'three', 'four']
  }
}

2. 使用v-for指令渲染列表

在组件中使用v-for指令将数据源渲染成列表：

<ol>
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

3. 使用vuedraggable指令

使用vuedraggable指令将渲染好的列表变成可拖拽的列表：

<ol v-draggable="list">
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

四、配置

除了基本的使用方式之外，vuedraggable还支持其他一些高级配置项，以下是一些常用的配置项：

1. cloning

默认情况下，当你拖拽一个元素时，这个元素会通过“移动”方式被拖动走，这意味着元素本身在列表中的位置已经改变了，如果你想保留列表中所有元素在拖拽之前的位置，则可以将cloning选项设置为true。

<ol v-draggable="list" :options="{cloning:true}">
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

2. handle

默认情况下，您可以通过单击列表中的任何元素来拖动它。如果您想限制拖动的部分，可以设置handle选项。handle选项指定一个选择器作为拖动句柄，只有选中的元素才可以拖曳。

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

3. group

如果你有多个可拖拽的列表，你可以使用group选项来将它们分组。当你将一个元素拖到另一个列表中时，group可以告诉vuedraggable要将元素插入到哪个列表中。

<ol v-draggable="list1" :options="{group:'list-group'}">
  <li v-for="(item,index) in list1" :key="index">{{item}}</li>
</ol>
<ol v-draggable="list2" :options="{group:'list-group'}">
  <li v-for="(item,index) in list2" :key="index">{{item}}</li>
</ol>

五、回调函数

vuedraggable支持一些回调函数，允许您在元素被拖拽和排序之后执行一些操作。

1. onDragstart

当元素被拖动开始时执行的回调函数。

<ol v-draggable="list" :options="{onDragstart:startDrag}">
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

methods:{
  startDrag(evt){
    console.log('dragging started');
  }
}

2. onDragend

当元素拖动结束时执行的回调函数。

<ol v-draggable="list" :options="{onDragend:endDrag}">
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

methods:{
  endDrag(evt){
    console.log('dragging ended');
  }
}

3. onDrop

当元素被拖放到一个新的位置并松开鼠标时执行的回调函数。

<ol v-draggable="list" :options="{onDrop:dropFunction}">
  <li v-for="(item,index) in list" :key="index">{{item}}</li>
</ol>

methods:{
  dropFunction(evt){
    console.log('dropped');
  }
}

六、总结

Vue3 Vuedraggable是一个非常强大的拖拽库，它可以让您快速创建可排序，可拖放和可放置的列表。使用Vue3的框架，它可以轻松地与您的应用程序集成。此外，vuedraggable还支持许多高级选项和回调函数，使您可以完全控制拖放列表的行为。希望本文介绍的内容对您有所帮助。

Vue3 Vuedraggable完整指南