Vue.Draggable 使用指南

一、简介

Vue.Draggable是一款基于 Sortable.js 的 Vue 拖拽排序组件，它通过绑定数组实现视图与数据的同步更新。vuedraggable 支持列表项的拖拽排序、跨列表拖拽、手动排序等功能，且兼容 Vue 2 和 Vue 3。基于项目使用该拖拽功能实现公式配置总结以下使用方法。

二、安装方法

在使用 Vue.Draggable 之前，需要先进行安装。以下是两种常见的安装方式：

1. npm 安装：打开命令行工具，进入项目根目录，执行以下命令：npm install vuedraggable --save。这种方式通过 npm 包管理工具安装，便于项目依赖的管理和更新。
2. yarn 安装：如果你的项目使用 yarn 作为包管理工具，可在项目根目录执行命令：yarn add vuedraggable。

三、基本使用

（一） 引入并注册组件

在需要使用拖拽功能的 Vue 组件中，首先要引入 Vue.Draggable。可以使用以下代码：

import draggable from 'vuedraggable'

然后，在组件的components选项中注册该组件：

export default {   components: {     draggable   },

（二）基础示例

下面是一个简单的 Vue.Draggable 使用示例，实现一个可拖拽排序的列表：

<template>   <div>     <draggable v-model="items" :options="{ group: 'items' }">       <div v-for="(item, index) in items" :key="index">         {{ item }}       </div>     </draggable>   </div> </template> <script> import draggable from 'vuedraggable'; export default {   components: {     draggable   },   data() {     return {       items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']     };   } }; </script>

 v-model 绑定

在上面的示例中，vuedraggable 的核心是通过 v-model 将数据绑定到 draggable 组件上。当我们拖拽列表项时，绑定的数组 items 会自动更新，因此无需手动处理数据的变化。

四、常用配置项

Vue.Draggable 提供了丰富的配置项，通过options属性进行设置，以下是一些常用的配置项：

1. animation：拖拽动画的持续时间（以毫秒为单位），默认值为 0，即无动画。
2. handle：指定可拖拽的手柄元素，只有点击该元素才能进行拖拽。例如，handle: '.drag-handle'表示只有类名为drag-handle的元素才能作为拖拽手柄。
3. group：用于配置不同列表之间的拖拽关系。可以是一个字符串，也可以是一个对象。当为对象时，包含name（组名，相同组名的列表可以相互拖拽）和pull（是否允许从其他列表拖入当前列表）、put（是否允许将当前列表的元素拖到其他列表）等属性。
4. ghostClass：拖拽过程中产生的占位元素的样式类。
5. chosenClass：被选中进行拖拽的元素的样式类。
6. sort：是否允许在当前列表内进行排序，默认为true。
7. direction：限制拖拽的方向，可选值为'horizontal'（水平方向）和'vertical'（垂直方向），默认情况下不限制方向。
8. containment：设置拖拽的范围，可指定一个 DOM 元素或选择器，被拖拽元素只能在该范围内移动。例如，containment: '#container'表示只能在 id 为container的元素内拖拽。
9. disabled：是否禁用拖拽功能，设置为true时，拖拽功能失效，默认为false。
10. delay：设置拖拽开始前的延迟时间（以毫秒为单位），在延迟时间内松开鼠标不会触发拖拽，可用于防止误操作，默认为 0。
11. delayOnTouchOnly：仅在触摸设备上启用延迟拖拽，默认为false。
12. touchStartThreshold：在触摸设备上，触发拖拽所需的最小移动距离，默认为 0。
13. scroll：是否允许在拖拽时滚动容器，默认为true。
14. scrollSensitivity：拖拽元素距离滚动容器边缘多远时触发滚动，默认为 20（像素）。
15. scrollSpeed：滚动速度，默认为 20。
16. filter：指定不允许被拖拽的元素，通过选择器设置，例如，filter: '.no-drag'表示类名为no-drag的元素不能被拖拽。
17. preventOnFilter：当触发filter时，是否阻止事件冒泡，默认为true。

五、常用事件

Vue.Draggable 提供了多种事件，用于在拖拽过程中执行相应的操作，以下是一些常用的事件：

1. start：当拖拽开始时触发，回调函数的参数为evt，包含拖拽相关的信息。
2. end：当拖拽结束时触发，参数同样为evt。
3. add：当有元素从其他列表添加到当前列表时触发，参数为evt，其中evt.item表示添加的元素，evt.from表示元素来自的列表。
4. remove：当元素从当前列表被移除并添加到其他列表时触发，参数为evt。
5. update：当列表内元素的位置发生变化时触发，参数为evt。

六、跨列表拖拽

（一）多列表之间的拖拽

vuedraggable 还支持跨列表的拖拽。通过配置 group 属性，我们可以允许列表项在不同列表之间拖拽。示例如下：

<template>   <div class="container">     <draggable v-model="listA" :options="{ group: 'shared' }">       <div v-for="(item, index) in listA" :key="index">         {{ item }}       </div>     </draggable>     <draggable v-model="listB" :options="{ group: 'shared' }">       <div v-for="(item, index) in listB" :key="index">         {{ item }}       </div>     </draggable>   </div> </template> <script> export default {   data() {     return {       listA: ['A1', 'A2', 'A3'],       listB: ['B1', 'B2', 'B3']     };   } }; </script> <style> .container {   display: flex;   justify-content: space-around; } </style>

（二）禁用拖拽

有时候，我们可能需要在某些条件下禁用拖拽功能。vuedraggable 提供了 disabled 属性来控制是否允许拖拽。

<template>   <div>     <button @click="toggleDrag">{{ dragEnabled ? '禁用拖拽' : '启用拖拽' }}</button>     <draggable v-model="items" :options="{ disabled: !dragEnabled }">       <div v-for="(item, index) in items" :key="index">         {{ item }}       </div>     </draggable>   </div> </template> <script> export default {   data() {     return {       items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],       dragEnabled: true     };   },   methods: {     toggleDrag() {       this.dragEnabled = !this.dragEnabled;     }   } }; </script>

七、注意事项

1. 确保绑定的数组是响应式的，这样在拖拽排序后，数组的变化才能及时反映到视图上。
2. 当使用key属性时，尽量避免使用索引作为key，因为在列表元素发生增删或排序变化时，可能会导致一些不可预期的问题。可以使用元素的唯一标识符作为key。
3. 在配置group属性实现跨列表拖拽时，要确保各个列表的group配置正确，以保证拖拽功能的正常实现。
4. 如果在拖拽过程中需要进行一些复杂的逻辑处理，建议在相应的事件回调函数中进行，避免影响拖拽的性能和体验。
5. 对于filter配置的不可拖拽元素，要确保选择器准确，否则可能会导致预期外的元素无法拖拽或可拖拽。
6. 在设置containment时，要确保指定的容器元素存在，否则可能会导致拖拽范围限制失效。