文章目录
- 前言
- 1、版本
- 2、vuedraggable页面的具体使用
- 3.核心
- (1) move官网说明
- (2) 注意点：
- (3) onDraggableMove方法
- 总结
前言
需求：左边是复选框，右边是选中的数据，编辑传入的数据不可拖拽，不可移动（其实还有一些判断的样式逻辑，不过多说明）
1、版本
"vue": "^2.6.11",
"vuedraggable": "^2.24.3",
2、vuedraggable页面的具体使用
引入、注册、使用
import Draggable from 'vuedraggable'
export default {
components: {
Draggable
},
}
<Draggable
v-model="list"
chosen-class="chosen"
force-fallback="true"
group="people"
animation="1000"
:move="(event) => onDraggableMove(event)"
>
<transition-group>
<div
v-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 指定样式类的元素才允许拖动
