vue2中vuedraggable设置部分元素不可拖拽，不可移动

前端张三2024-07-02 11:42

文章目录

前言
1、版本
2、vuedraggable页面的具体使用
3.核心
- [(1) move官网说明](#(1) move官网说明)
- [(2) 注意点：](#(2) 注意点：)
- [(3) onDraggableMove方法](#(3) onDraggableMove方法)
总结

前言

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

1、版本

javascript 复制代码

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

2、vuedraggable页面的具体使用

引入、注册、使用

javascript 复制代码

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

html 复制代码

<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就说允许拖拽

javascript 复制代码

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

总结

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