持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
前文 基于 draggable 实现表单设计器的拖拽功能 中介绍到关于表单设计器的实现思路以及 VueDraggable 的实现方法。在实际使用拖拽的过程中会遇到一些场景
比如，有些时候我们会在两个互相独立的组件中实现拖拽的交互，并且不仅要实现拖拽的功能，还会有一些样式方面的体现。接下来就来展开说一说
场景一：两个独立组件之间的拖拽
- 组件1：负责拖拽元素
- 组件2：负责放置拖拽后的元素
代码实现：
记得一定要先引入,否则拖拽会不生效
import Draggable from 'vuedraggable'
组件1：
<Draggable tag="div" item-key="id" :group="{ name: 'myGroup', pull: 'clone', put: false }" :sort="false" :list="myData">
<template #item="{ element, index }">
<div class='box-item'>{{index}} : {{element}}</div>
</template>
</Draggable>
组件2：
<Draggable
item-key="id"
ghostClass="ghost"
chosenClass="chosen"
handle=".drag-item"
:animation="200"
:group="{ name: 'myGroup' }"
:list="myData2"
@add="add"
>
<template #item="{ element, index }">
<transition-group name="fade" tag="div" class='drag-item' :key="index" >
<!-- 拖拽后要展示的部分 -->
</transition-group>
</template>
</Draggable>
关于拖拽相关的事件，在vuedraggable.d.ts 核心库中可以看到相关的声明：
时间的用法要去掉里面的on，比如：@update="", @dragEnd=""
场景二：设置拖拽过程中的展现样式
在上面的代码中可以看到 Draggable 组件的上面设置了一些属性：
- ghostClass
- chosenClass
- animation
ghostClass : 表示目标位置占位符的样式及需要停靠位置的样式。下图中为拖拽到右侧会显示红色，在未释放之前显示为灰黑色样式，这些都可以通过ghostClass来设置样式
chosenClass：表示选中时的样式。如下图，鼠标点击组件显示为黑色背景，此时还未进行拖动。
animation ： 过渡效果，让拖拽的过程看起来更流畅。默认值为0
.ghostClass { background-color: black; }
.chosenClass { background-color: red; }
另外需要注意的是，handle属性的值对应的是指定可拖动元素的样式名称，并且在可拖动元素上定义好这个类。常用于拖拽元素的局部位置
