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

因为这个项目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、效果图