---

前言

需求：左边是复选框，右边是选中的数据，编辑传入的数据不可拖拽，不可移动（其实还有一些判断的样式逻辑，不过多说明）

---

1、版本

"vue": "^2.6.11",
"vuedraggable": "^2.24.3",

2、vuedraggable页面的具体使用

引入、注册、使用

import Draggable from 'vuedraggable'
export default {components: {Draggable},
}

<Draggablev-model="list"chosen-class="chosen"force-fallback="true"group="people"animation="1000":move="(event) => onDraggableMove(event)"
><transition-group><divv-for="(item, index) in list":key="item"class="item">{{ item }}</div></transition-group>
</Draggable>

3.核心

(1) move官网说明

vue.draggable move 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠：https://www.itxst.com/vue-draggable/ufjv2i7j.html

(2) 注意点：

move不是和@start或者@end一样，前面的是v-bind，也就是:move=“方法”, 参数event的打印如下

(3) onDraggableMove方法

返回false就是不能拖拽，返回true就说允许拖拽

onDraggableMove (event) {console.log('event', event)return false // 为 false 不允许拖拽
}

---

总结

onDraggableMove里面的disabled 是我在绑定draggable的v-modal数据里面的item，是由于传入数据后，左边的checkout也需要disabled进行禁用。如果你不想更改源数据，你可以参考 sortable.js draggable 指定样式类的元素才允许拖动