手把手带你过一遍vue拖拽插件vuedraggable所有功能

一、概述
Vue Draggable是一个基于Sortable.js的Vue拖拽组件，提供了丰富的配置选项和API，使得在Vue应用中实现拖拽功能变得简单快捷。
二、安装
使用npm或yarn安装vuedraggable：

1. npm install vuedraggable
2. yarn add vuedraggable
   三、使用
3. 在Vue组件中引入vuedraggable：

   import draggable from 'vuedraggable'

4. 在Vue模板中使用vuedraggable：

   <draggable v-model="myArray" :options="options">
   <div v-for="element in myArray" :key="element.id">
   {{ element.name }}
   </div>
   </draggable>

   其中，myArray是需要进行拖拽的数据数组，options是vuedraggable的配置选项。
   四、配置选项
   vuedraggable提供了丰富的配置选项，以下是一些常用的配置项：
5. group：用于定义可拖拽元素之间的逻辑分组，只有在同一分组内的元素才能进行拖拽交换。
6. animation：拖拽动画的时长，单位为毫秒。
7. ghostClass：拖拽时的幽灵元素使用的CSS类名。
8. chosenClass：被选中可拖拽的元素使用的CSS类名。
9. disabledClass：不可拖拽的元素使用的CSS类名。
10. scroll：是否启用自动滚动，默认为true。
11. scrollContainer：指定滚动容器的选择器或DOM元素。
12. draggable：是否启用拖拽，默认为true。
13. filter：用于过滤可拖拽的元素的选择器或函数。
14. handle：用于指定拖拽手柄的选择器或函数。
15. draggableScope：用于指定可拖拽元素的范围。
16. draggableScopeWriteOnce：是否只允许在组件初始化时设置一次可拖拽元素的范围。
17. listType：用于指定列表类型，默认为”ul”。
18. dragStartPredicate：自定义拖拽开始的条件函数。
19. dragEndPredicate：自定义拖拽结束的条件函数。
20. dragOverContainer：自定义放置目标容器的选择器或DOM元素。
21. dragOverClass：自定义放置目标元素使用的CSS类名。
22. dragOverModifier：自定义放置目标位置的修改器函数。
23. dropModifier：自定义放置目标位置的修改器函数。
24. dropModel：自定义放置目标模型的选择器或函数。
25. dropContainer：自定义放置目标容器的选择器或DOM元素。
26. dropClass：自定义放置目标元素使用的CSS类名。
27. multipleDropAllowed：是否允许多个放置目标同时存在。
28. groupSortable：是否启用组内元素的拖拽交换功能。
29. groupReverseBubblingOrder：是否启用反向冒泡顺序，即子元素先于父元素触发结束事件。
30. moveBackgroundClassOnBody：是否在拖拽时为body添加背景色类名。
31. touchScrollAllowed：是否允许在非放置目标容器内使用touchmove事件进行滚动。
32. scrollSensitivity：自动滚动时的敏感性，单位为像素。
33. scrollSpeed：自动滚动的速度，单位为像素/毫秒。等等…
    五、常见问题与解决方法（持续更新）