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

相关推荐
dy17171 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5