基于Jeecgboot3.6.3的vue3版本的流程中仿钉钉流程的鼠标拖动功能支持

news2024/9/29 13:17:30

因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。

 1、因为原先仿钉钉流程里不能进行鼠标拖动来查看流程,所以根据作者提供的信息进行修改,在hooks下增加下面文件useDraggableScroll.ts

import { ref, onMounted, onBeforeUnmount, type Ref } from 'vue'

export function useDraggableScroll(containerRef: Ref<HTMLElement | null>) {
  const isDragging = ref(false);
  let startX: number, startY: number;
  let scrollLeft: number, scrollTop: number;

  const onMouseDown = (e: MouseEvent) => {
    if (!containerRef.value) return;
    isDragging.value = true;
    startX = e.pageX;
    startY = e.pageY;
    scrollLeft = containerRef.value.scrollLeft;
    scrollTop = containerRef.value.scrollTop;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };

  const onMouseMove = (e: MouseEvent) => {
    if (!isDragging.value || !containerRef.value) return;
    const deltaX = e.pageX - startX;
    const deltaY = e.pageY - startY;
    containerRef.value.scrollLeft = scrollLeft - deltaX;
    containerRef.value.scrollTop = scrollTop - deltaY;
  };

  const onMouseUp = () => {
    isDragging.value = false;
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };

  onMounted(() => {
    containerRef.value?.addEventListener('mousedown', onMouseDown);
  });

  onBeforeUnmount(() => {
    containerRef.value?.removeEventListener('mousedown', onMouseDown);
  });

  return {
    isDragging,
  };
}

2、在lowflow\flowDesign\index修改增加相应的操作

import { useDraggableScroll } from '@/views/lowflow/hooks/useDraggableScroll'

const designerContainerRef = ref<HTMLElement | null>(null)
useDraggableScroll(designerContainerRef);

<div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">

designer-container {
  --flow-bg-color: v-bind(bgColor);
  position: relative;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: var(--flow-bg-color);
  padding: 80px 0;

3、ModelDesigner.vue的样式做下面的跳转,以便满足拖动等界面要求

.el-dialog.is-fullscreen.ddDialog {
      overflow: hidden;
    }
    .ddDialog .el-dialog__body {
      height: 95%;
      overflow: auto;
    }

4、效果图

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

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

相关文章

【Python】操作数据库

一、数据库编程接口 为了对数据库进行统一的操作&#xff0c;大多数语言都提供了标准化的数据库接口&#xff08;API&#xff09;。数据库提供了接口&#xff0c;Python定义了规范&#xff08;包括数据操作的对象、函数等&#xff09;&#xff0c;通过Python定义的对象就能直接…

对称加密 和 非对称加密

对称加密 和 非对称加密 文章目录 对称加密 和 非对称加密对称解密——异或运算非对称解密——RSA算法问题RSA算法社会地位缺点 PS&#xff1a;RSA算法的攻击方式 如果对你有帮助&#xff0c;就点赞收藏把&#xff01;(&#xff61;&#xff65;ω&#xff65;&#xff61;)&am…

支持10K长视频理解的多模态大模型MovieChat(CVPR 2024)

MovieChat: From Dense Token to Sparse Memory for Long Video Understanding 论文信息 paper&#xff1a;CVPR 2024 code&#xff1a;https://rese1f.github.io/MovieChat/ 视觉模型大语言模型&#xff1a;首个支持10K帧长视频理解任务的新型框架&#xff08;推荐这篇公众号…

小程序开发全攻略:从零到上线的实战历程

引言 在当今的数字化时代&#xff0c;小程序凭借其轻便、快捷的特点&#xff0c;成为了连接用户与服务的桥梁。作为一名开发者&#xff0c;你可能正考虑踏入小程序开发的领域&#xff0c;但面对纷繁复杂的开发流程和技术要点&#xff0c;或许会感到无从下手。今天&#xff0c;我…

C 语言文件操作详解

目录 引言 一、基本概念 1.什么是文件 2.文件的属性 3.为什么使用文件 4.二进制文件和文本文件 二、文件的打开和关闭 1.流和标准流 2.文件指针 3.文件的打开和关闭 三、⽂件的顺序读写 1.顺序读写函数 2.详细介绍 1.fgetc 2.fputc 3.fgets 4.fputs 5.fscan…

统计:多变量时间序列分析 — VMA、VAR、VARMA

统计&#xff1a;多变量时间序列分析 — VMA、VAR、VARMA 一、说明 多变量时间序列是一个在大学课堂上经常被忽视的话题。然而&#xff0c;真实世界的数据通常具有多个维度&#xff0c;我们需要多变量时间序列分析技术。在这篇博客中&#xff0c;我们将通过可视化和 Python 实现…

【GLM-4开发实战】Function Call进阶实战:外部函数调用回顾

系列篇章&#x1f4a5; No.文章1【GLM-4开发实战】Function Call进阶实战&#xff1a;外部函数调用回顾2【GLM-4开发实战】Function Call进阶实战&#xff1a;常见挑战之意图识别处理3【GLM-4开发实战】Function Call进阶实战&#xff1a;常见挑战之海量函数处理4【GLM-4开发实…

【STM32】GPIO和AFIO标准库使用框架

本篇博客重点在于标准库函数的理解与使用&#xff0c;搭建一个框架便于快速开发 目录 GPIO简介 GPIO时钟使能 GPIO初始化 工作模式 选择引脚 输出速度 函数应用 GPIO初始化框架 8个电平读写函数 写端口电平 读端口电平 GPIO框架汇总 AFIO简介 AFIO时钟使能 函数应…

【Material-UI】深入理解useAutocomplete Hook:自定义与高级用法

文章目录 一、什么是useAutocomplete&#xff1f;导入useAutocomplete 二、基本用法代码解析 三、高级定制1. 自定义选项渲染2. 分组和排序3. 自定义输入框行为4. 与其他组件集成 四、注意事项1. 类型安全2. 性能优化 五、总结 Material-UI提供了强大的Autocomplete组件&#x…

Stable Diffusion绘画 | 图生图-基础使用介绍—重绘幅度与缩放模式

重绘幅度 重绘幅度越大&#xff0c;出图与原图差异越大。 重绘幅度0.7 重绘幅度0.3 缩放模式 目前有以下四种缩放模式&#xff1a; 原图的宽高是1080x1440&#xff0c;当修改宽高&#xff0c;与原图不一致时&#xff0c;可选择其中一种缩放模式来处理图片。 仅调整大小 缩放…

C++入门基础(上篇)

C入门基础&#xff08;上篇&#xff09; hello everybody!经历了C语言和初阶数据结构的头脑风暴&#xff0c;相信大家对于编程的学习更加开心&#xff0c;所以说接下来我们将迎来C的学习与探索&#xff0c;话不多说让我们开始吧 namespace的价值 在C/C中&#xff0c;变量、函…

计算机毕业设计选题推荐-自习室座位预约系统-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

GD32 MCU硬件I2C不可靠不如软件I2C?

在一个评论中&#xff0c;看到网友对硬件I2C的讨论&#xff0c;硬件I2C Busy找不到原因、软件I2C稳得一批。 那么为什么会出现I2C BUSY&#xff1f;硬件I2C真的不如软件I2C吗&#xff1f;怎么让硬件I2C也稳得一批&#xff0c;让我们来一探究竟。 首先我们从I2C时序分析下I2C总…

基于pytorch的steam游戏评分的线性回归问题分析

前言 相信已经暑假一个月的大家肯定并不陌生上面这个学习软件()&#xff0c;面对琳琅满目的游戏总是让人不知道挑选什么&#xff0c;这时候一个游戏的评分往往便成为了一个玩家选择下载的原因&#xff0c;那么今天我们就来研究研究&#xff0c;steam上一个游戏的种种数据&…

Celery注册装饰器@app.task和@shared_task

注册装饰器 app.task和shared_task是Celery中用于定义任务的两种不同装饰器, 它们之间存在明显的区别.from celery import Celery app Celery(my_app, brokeramqp://guestlocalhost//) app.task def my_task(): # 任务逻辑 passfrom celery import shared_task shared…

数据结构——双链表详解(超详细)

前言&#xff1a; 小编在之前已经写过单链表的创建了&#xff0c;接下来要开始双链表的讲解了&#xff0c;双链表比单链表要复杂一些&#xff0c;不过确实要比单链表更好进行实现&#xff01;下面紧跟小编的步伐&#xff0c;开启今天的双链表之旅&#xff01; 目录 1.概念和结构…

Pixart LED调变开发笔记

Pixart提供基础的鼠标和键盘代码, 开发者可以基于此快速的建置自己的firmware, application, 以下介绍代码中用来控制LED的API函式. 常亮模式 (Always on) 常亮模式, 调用API "pwm_led_set_always_on" 及 channel 来设置对应LED常亮. 闪烁模式 (Flash mode) 闪烁模…

华为OD机试 - 字符串编码校验(Java 2024 D卷 100分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华…

Unity3D 物体圆周运动

Unity3D 实现一个 2D 物体沿着圆周进行运动。 物体圆周运动 前段时间在开发一个小游戏时&#xff0c;需要实现火箭沿着一个圆形轨道进行圆周运动。 以前面试的时候也被问到过这类问题&#xff08;如何让一个 2D 物体做圆周运动&#xff09;&#xff0c;所以还是记录一下实现…