当前位置: 首页 > news >正文

logic-flow 使用过程中遇到的bug - 拖动节点到画布的时候,鼠标松开,节点不落在画布,仍旧跟着鼠标走

背景:
插件:logicFlow
用途:画流程图
bug表现:

初始化的样子:
在这里插入图片描述
bug的样子:
拖动第一个节点的时候,一切正常(无论哪个节点作为第一个节点,都是正常的,但是拖动第二个节点的时候,节点面板出现重影一样的效果,如图)
在这里插入图片描述
此时选中的节点会一直跟随鼠标移动,不落在画布上,需要单击鼠标左键才可以落下,落下后,控制台会报错如下
在这里插入图片描述
解决办法:
给盒子里的icon和文字都加上 user-select: none; 让它们无法被选择

css大概如下:
.node-item {pointer-events: auto;}
.node-item-icon {pointer-events: none;user-select: none;
}
.node-label {user-select: none;pointer-events: none;
}

关于 pointer-events:
CSS的pointer-events属性用于指定什么情况下元素可以成为鼠标事件的target。它常用的关键字有auto和none
pointer-events: auto; 是默认值,鼠标不会穿透当前层。
pointer-events: none; 会让一个元素忽略鼠标操作。

在这里插入图片描述

相关文章:

  • 【23真题】最后一套两电一邮,纸老虎偏多!
  • go sync.map源码解读
  • UDP网络套接字编程
  • JS——日期字符串yyyymmdd转yyyy-mm-dd的两种方法
  • TS是什么、为什么、怎么办
  • git代码提交命令(如何提交代码)
  • 装饰器设计模式是什么?什么是 Decorator 装饰器设计模式?Python 装饰器设计模式示例代码
  • Spark---基于Standalone模式提交任务
  • 三十分钟学会Shell(上)
  • 51单片机的智能浇花系统【含proteus仿真+程序+报告+原理图】
  • vue3的 nextTick()的使用
  • leetcode 240. 搜索二维矩阵 II
  • [Android]使用Retrofit进行网络请求
  • 含分布式电源的配电网可靠性评估(matlab代码)
  • vue2.0+elementui集成file-loader之后图标失效问题
  • docker-consul
  • gcc介绍及安装
  • js数组之filter
  • nodejs实现webservice问题总结
  • Redis学习笔记 - pipline(流水线、管道)
  • SOFAMosn配置模型
  • VUE es6技巧写法(持续更新中~~~)
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 基于HAProxy的高性能缓存服务器nuster
  • 我从编程教室毕业
  • 一个项目push到多个远程Git仓库
  • C# - 为值类型重定义相等性
  • HanLP分词命名实体提取详解
  • 机器人开始自主学习,是人类福祉,还是定时炸弹? ...
  • 支付宝花15年解决的这个问题,顶得上做出十个支付宝 ...
  • #在 README.md 中生成项目目录结构
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (14)学习笔记:动手深度学习(Pytorch神经网络基础)
  • (C++17) std算法之执行策略 execution
  • (done) 两个矩阵 “相似” 是什么意思?
  • (备忘)Java Map 遍历
  • (第61天)多租户架构(CDB/PDB)
  • (附源码)spring boot火车票售卖系统 毕业设计 211004
  • (附源码)springboot学生选课系统 毕业设计 612555
  • (接口自动化)Python3操作MySQL数据库
  • (生成器)yield与(迭代器)generator
  • (四) 虚拟摄像头vivi体验
  • (一)SpringBoot3---尚硅谷总结
  • (译) 函数式 JS #1:简介
  • (转载)Linux网络编程入门
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .form文件_SSM框架文件上传篇
  • .htaccess配置常用技巧
  • .NET 8.0 发布到 IIS
  • .NET CORE 2.0发布后没有 VIEWS视图页面文件
  • .Net CoreRabbitMQ消息存储可靠机制
  • .NET 命令行参数包含应用程序路径吗?
  • .NET高级面试指南专题十一【 设计模式介绍,为什么要用设计模式】
  • /usr/bin/python: can't decompress data; zlib not available 的异常处理
  • ??如何把JavaScript脚本中的参数传到java代码段中