一招教你轻松实现数据拖拽功能!

前段时间业务需求里面有通过拖拽来实现类似排班的效果，但实际业务逻辑比较复杂，数据间的关联度强，不太方便展示，这里就单独把拖拽写了一个小demo进行展示。

需求：拖动左边表格里的数据进行患者手术排台

实现思路：

1、在需要拖动的dom节点上添加以下属性和事件

:draggable="true"    // 开启拖拽

@dragover.prevent.stop // 防止事件冒泡

@dragstart="onDragleave($event, item)" // 拖拽事件开始（item：被拖拽的所有数据）

2、在目标拖拽dom节点上添加以下事件

@dragover.prevent

@dragenter.prevent

@drop="handleDrop($event, item)" // item：拖拽前绑定的的原始数据

 完整代码：