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

文章目录

  • 前言
  • 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},
}
<Draggablev-model="list"chosen-class="chosen"force-fallback="true"group="people"animation="1000":move="(event) => onDraggableMove(event)"
><transition-group><divv-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 指定样式类的元素才允许拖动

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/38942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Datax快速使用之牛刀小试

前言 一次我发现业务他们在用 datax数据同步工具&#xff0c;我尤记得曾经 19 年使用过&#xff0c;并且基于当时的版本还修复了个 BUG并且做了数据同步管道的集成开发。没想到时间过的飞快&#xff0c;业务方基于海豚调度 2.0.6 的版本中有在使用&#xff0c;由于业务方还没有…

【启明智显活动分享】 启明与你,上海慕尼黑电子展不见不散!

启明与你&#xff0c;上海慕尼黑电子展不见不散&#xff01;&#x1f389; &#x1f50d; 展会现场&#xff0c;你将亲眼目睹RTOS、LINUX、Android全系列方案及产品的精彩展示。从经典到前沿&#xff0c;一站式满足你的技术探索需求。 &#x1f4a1; 更值得期待的是&#xff0…

Java源码实现《植物大战僵尸》

前言 学Java的朋友们&#xff0c;福利来了&#xff0c;今天小编给大家带来了一款 植物大战僵尸源码&#xff0c;看图: 视频演示 java植物大战僵尸 环境JDK1.8 类继承UML图 源码实现 我们先从main函数看起&#xff0c;继承了javafx.application.Application。JavaFx是Java图形…

mysql5.7.30忘记root密码

windows系统安装了mysql5.7.30&#xff0c;在使用navicat链接mysql时候&#xff0c;提示 如何解决&#xff1a; 打开任务管理器的服务&#xff0c;查看有没有MYSQL服务。 如果没有&#xff0c;则按照下面的csdn博客进行操作。 https://blog.csdn.net/clj198606061111/article…

Eclipse 2024最新版本分享

一、软件介绍 Eclipse是一个开源的、基于Java的可扩展开发平台&#xff0c;最初由IBM公司开发&#xff0c;后于2001年贡献给开源社区&#xff0c;并由Eclipse基金会负责管理和开发。 如果在官网上下载比较慢&#xff0c;可以试试从云盘中下载&#xff0c;解压即可使用。 二、下…

使用Pogo-DroneCAN CANHUB扩展板扩展飞控的CAN口

关键词&#xff1a;Ardupilot&#xff0c;Pixhawk&#xff0c;DroneCAN CANHUB扩展&#xff0c;扩展飞控CAN口 keywords&#xff1a;Ardupilot&#xff0c;Pixhawk&#xff0c;DroneCAN CANHUB Extend 摘要&#xff1a;使用Pogo-DroneCAN CANHUB扩展板扩展飞控CAN口&#xff…

一文讲解Docker入门到精通

一、引入 1、什么是虚拟化 在计算机中&#xff0c;虚拟化&#xff08;英语&#xff1a;Virtualization&#xff09;是一种资源管理技术&#xff0c;它允许在一台物理机上创建多个独立的虚拟环境&#xff0c;这些环境被称为虚拟机&#xff08;VM&#xff09;。每个虚拟机都可以…

element ui form 表单验证

表单验证方法 在el-form元素上总体设置校验规则rules&#xff0c;下面是官方案例 <el-form :model"ruleForm" :rules"rules" ref"ruleForm" label-width"100px" class"demo-ruleForm"><el-form-item label"…

湖北大学2024年成人高考函授报名专升本会计学专业介绍

湖北大学&#xff0c;这所坐落于历史文化名城武汉的高等学府&#xff0c;自其创立之初&#xff0c;便秉持着“厚德博学&#xff0c;求是创新”的校训&#xff0c;致力于培养一代又一代的优秀人才。而今&#xff0c;为满足广大社会人士对高等教育的渴求&#xff0c;特别是那些已…

【Java EE】Spring IOCDI

Spring IOC & DI 文章目录 Spring IOC & DI一、Spring是什么&#xff1f;二、IOC(控制反转)2.1 通俗理解2.2 造汽车的例子理解IOC2.3 IOC详解1. 获取Bean2. 方法注解——Bean1. 应用场景&#xff1a;2. 应用方法&#xff1a;3. 注意要点&#xff1a; 特别注意: 四、DI4…

计算机视觉 | 基于 PointNet 网络的飞机零件 3D 点云分割

目录 一、简要介绍二、环境设置2.1 实验配置2.2 必要库安装 三、数据集解析3.1 数据集加载3.2 数据文件夹结构3.3 点云数据可视化3.4 数据获取与预处理3.5 数据集定义 四、模型组网4.1 PointNet 介绍4.2 Paddle模型组网4.3 模型概要 五、模型训练六、模型预测七、总结 Hi&#…

2.1 程序设计语言基础

程序设计语言概述 常见的编程语言 编译和解释 程序设计语言的基本成分 数据成分、运算成分、控制成分、传输成分 函数 传值调用、传址调用 编译程序基本原理

window上部署sql server改动端口、和sqlserver的一些还原、批量插入存储过程的命令

1.端口的查看和启动 --windows上安装上sql server数据库后&#xff0c;搜索界面搜索sql&#xff0c;会出现配置管理器&#xff0c;点击进入 --进入后再次选择配置管理器 2. sqlserver数据库还原图形化 sqlserver还原数据库时会使数据库进入一个restore的还原状态&#xff0c;…

昇思25天学习打卡营第6天|Vision Transformer

文章目录 昇思MindSpore应用实践基于MindSpore的Vision Transformer1、Vision Transformer&#xff08;ViT&#xff09;简介网络结构 2、Attention模块Encoder部分用到的功能函数&#xff1a;整体构建ViT模型 3、模型训练4、模型验证 Reference 昇思MindSpore应用实践 本系列文…

linux网络命令:httpie详解-简单易用的命令行 HTTP 客户端

目录 一、命令概述 二、基本特点 1、直观和友好的命令语句 2、内置 JSON 支持 3、支持多种请求方法 4、支持 HTTPS、代理和授权验证 5、支持多种请求数据格式 6、自定义 headers 头 7、持久 sessions 存储 8、插件支持 三、安装 1、对于基于 Debian 的系统&#xf…

MQ运行时遇到的问题

遇到的问题描述&#xff1a;我在绑定通道的时候发现了通道绑定失败&#xff0c; 原因&#xff1a; 在代码中我第一次创建交换机的时候类型的默认没有修改成topic类型的&#xff0c;导致后面的代码再去进行注册的时候并没有实现那个类型 解决&#xff1a; 更改代码&#xff0…

vue3+ el-upload封装上传组件

组件功能介绍 上传格式限制上传大小限制上传文件数量限制自定义上传区上传成功回调禁用上传开关与点击上传自定义事件暴露所以上传文件列表&#xff08;uploadList&#xff09;与当前文件数据&#xff08;uploadLatestFile&#xff09; 组件代码Upload.vue <template>&l…

在Stimulsoft 报告中连接来自 MySQL 的数据

Stimulsoft Ultimate &#xff08;原Stimulsoft Reports.Ultimate&#xff09;是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能&#xff0c;Stimulsoft Ultimate包含了…

Firewalld 防火墙基础

Firewalld 防火墙基础 一、Firewalld概述firewalld 简介firewalld 和 iptables 的关系firewalld 与 iptables service 的区别 二、Firewalld 网络区域区域介绍Firewalld数据处理流程 三、Firewalld 防火墙的配置方法firewall-config 图形工具“区域”选项卡“服务”选项卡改变防…

仓库管理系统24--统计报表

原创不易&#xff0c;打字不易&#xff0c;截图不易&#xff0c;多多点赞&#xff0c;送人玫瑰&#xff0c;留有余香&#xff0c;财务自由明日实现 1、引用LiveCharts 2、创建LiveChartViewModel using GalaSoft.MvvmLight; using LiveCharts.Wpf; using LiveCharts; using Sy…