移动，缩放组件适配触摸事件

src/third_lib/vue3-resize-drag/components/vue3-resize-drag-canvas/index.vue

@@ -1,10 +0,0 @@
-<template>
-    
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-    name:'vue3ResizeDragCanvas'
-})
-</script>

src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts

@@ -1,5 +1,3 @@
-import { ref, reactive } from "vue";
-import { styleIf } from "../../../types/style";
 // 外层元素点击拖拽
 const itemDrag = (
   ev: any,
@@ -21,14 +19,22 @@ const itemDrag = (
   });
   if (!props.isDraggable) return;
   //鼠标按下并移动的事件
-  document.onmousemove = (e: any) => {
-    if (e.movementX || e.movementY) {
+
+  interface IMoveParam {
+    movementX: number;
+    movementY: number;
+    clientX: number;
+    clientY: number;
+  }
+
+  const onmove = (param: any) => {
+    if (param.movementX || param.movementY) {
       moveing.value = true;
 
-      let offset_left = press_x - e.clientX;
-      let offset_top = press_y - e.clientY;
-      press_x = e.clientX;
-      press_y = e.clientY;
+      let offset_left = press_x - param.clientX;
+      let offset_top = press_y - param.clientY;
+      press_x = param.clientX;
+      press_y = param.clientY;
 
       //绑定元素位置到positionX和positionY上面
 
@@ -38,13 +44,31 @@ const itemDrag = (
       emit("moveHandler", {
         // 移动事件回调
         el: target,
-        e,
+        param,
         top: style.top,
         left: style.left,
       });
     }
   };
-  document.onmouseup = (e: any) => {
+
+  document.onmousemove = (e: any) => {
+    onmove(e);
+  };
+
+  if ("ontouchmove" in document.documentElement === true) {
+    document.ontouchmove = (e: TouchEvent) => {
+      if (e.changedTouches && e.changedTouches.length) {
+        onmove({
+          movementX: 1,
+          movementY: 1,
+          clientX: e.changedTouches[0].clientX,
+          clientY: e.changedTouches[0].clientY,
+        });
+      }
+    };
+  }
+
+  const onmoveend = (e: any) => {
     moveing.value = false;
     if (style.left == style.back_left && style.top == style.back_top) {
       style.left = style.back_left;
@@ -61,6 +85,17 @@ const itemDrag = (
 
     document.onmousemove = null;
     document.onmouseup = null;
+    if ("ontouchmove" in document.documentElement === true) {
+      document.ontouchmove = null;
+    }
+    if ("ontouchend" in document.documentElement === true) {
+      document.ontouchend = null;
+    }
   };
+
+  document.onmouseup = onmoveend;
+  if ("ontouchend" in document.documentElement === true) {
+    document.ontouchend = (e) => onmoveend(e);
+  }
 };
 export default itemDrag;

src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/resize.ts

@@ -16,7 +16,15 @@ const itemResize = (
   let top: number = 0;
   let left: number = 0;
   // 鼠标拖拽改变元素大小
-  document.onmousemove = (e) => {
+
+  interface IMoveParam {
+    movementX: number;
+    movementY: number;
+    clientY: number;
+    clientX: number;
+  }
+
+  const onmove = (e: IMoveParam) => {
     if (e.movementX || e.movementY) {
       move_flag = true;
       switch (cls) {
@@ -91,7 +99,21 @@ const itemResize = (
     }
   };
 
-  document.onmouseup = (e: any) => {
+  document.onmousemove = onmove;
+  if ("ontouchmove" in document.documentElement === true) {
+    document.ontouchmove = (e: TouchEvent) => {
+      if (e.changedTouches && e.changedTouches.length) {
+        onmove({
+          movementX: 1,
+          movementY: 1,
+          clientX: e.changedTouches[0].clientX,
+          clientY: e.changedTouches[0].clientY,
+        });
+      }
+    };
+  }
+
+  const onmoveend = (e: any) => {
     if (!move_flag) {
       style.left = style.back_left;
       style.top = style.back_top;
@@ -108,6 +130,17 @@ const itemResize = (
     }
     document.onmousemove = null;
     document.onmouseup = null;
+    if ("ontouchmove" in document.documentElement === true) {
+      document.ontouchmove = null;
+    }
+    if ("ontouchend" in document.documentElement === true) {
+      document.ontouchend = null;
+    }
   };
+
+  document.onmouseup = onmoveend;
+  if ("ontouchend" in document.documentElement === true) {
+    document.ontouchend = (e) => onmoveend(e);
+  }
 };
 export default itemResize;

src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="vue3-resize-drag" :style="styleHandler" @mousedown="itemDown">
+  <div
+    class="vue3-resize-drag"
+    :style="styleHandler"
+    @mousedown="itemDown"
+    @touchstart="itemTouch"
+  >
     <slot></slot>
     <div v-if="isRotate" class="rotate-icon" @mousedown="itemRotate"></div>
     <!-- 组件移动辅助线 -->
@@ -18,6 +23,7 @@
       class="dragElResizeIcon"
       :class="el.class"
       @mousedown="itemResize($event, el.class, index)"
+      @touchstart="itemResizeTouch($event, el.class, index)"
       :style="el.style"
     ></div>
   </div>
@@ -49,7 +55,8 @@ export default defineComponent({
 
     //   事件-----------------------------------------------------------------------------------------------
     watchProps(props, style);
-    const itemResize = (ev: any, cls: string, index: number) => {
+
+    const onItemResize = (ev: any, cls: string, index: number) => {
       // 缩放
       style.back_top = style.top;
       style.back_height = style.height;
@@ -57,11 +64,21 @@ export default defineComponent({
       style.back_width = style.width;
       itemResizeFn(ev, cls, index, emit, style);
     };
+
+    const itemResizeTouch = (ev: any, cls: string, index: number) => {
+      onItemResize(ev, cls, index);
+    };
+
+    const itemResize = (ev: any, cls: string, index: number) => {
+      onItemResize(ev, cls, index);
+    };
+
     const itemRotate = (ev: any) => {
       // 旋转
       itemRotateFn(ev, emit, style);
     };
-    const itemDown = (ev: any) => {
+
+    const onItemSelect = (ev: any) => {
       if (!props.isActive) {
         return;
       }
@@ -75,13 +92,29 @@ export default defineComponent({
       style.back_width = style.width;
       itemDrag(ev, emit, props, style, moveing);
     };
+    const itemTouch = (ev: TouchEvent) => {
+      if (ev.changedTouches && ev.changedTouches.length) {
+        (ev as any).clientX = ev.changedTouches[0].clientX;
+        (ev as any).clientY = ev.changedTouches[0].clientY;
+      }
+      onItemSelect(ev);
+    };
+
+    const itemDown = (ev: any) => {
+      if ("touchstart" in document.documentElement === true) {
+        ev.return;
+      }
+      onItemSelect(ev);
+    };
     active(props, emit); // 监听激活
     return {
       style,
       guideBaseStyle,
       dragElResizeIcon,
       styleHandler,
+      itemTouch,
       itemDown,
+      itemResizeTouch,
       itemResize,
       itemRotate,
       moveing,