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

文章目录


前言

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


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 指定样式类的元素才允许拖动

相关推荐
前端 贾公子6 小时前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说6 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
麦兜*8 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs8 小时前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
知了一笑8 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室9 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~9 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋9 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy9 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈9 小时前
CSS中的Element语法
前端·css