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

相关推荐
毕业设计制作和分享21 分钟前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ3 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep5 小时前
【前端】前端运行环境的结构
前端
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
Aitter5 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front6 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'6 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'6 小时前
css `dorp-shadow`
前端·css