From f76e31ef5a1629749c6eab60638c7288cb17f041 Mon Sep 17 00:00:00 2001
From: fangxiang <fangxiang@cloudview.work>
Date: Fri, 15 Apr 2022 11:24:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=EF=BC=8C=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D=E8=A7=A6=E6=91=B8=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vue3-resize-drag-canvas/index.vue         | 10 ----
 .../components/vue3-resize-drag/func/drag.ts  | 55 +++++++++++++++----
 .../vue3-resize-drag/func/resize.ts           | 37 ++++++++++++-
 .../components/vue3-resize-drag/index.vue     | 39 ++++++++++++-
 4 files changed, 116 insertions(+), 25 deletions(-)
 delete mode 100644 src/third_lib/vue3-resize-drag/components/vue3-resize-drag-canvas/index.vue

diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag-canvas/index.vue b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag-canvas/index.vue
deleted file mode 100644
index 2e0eefb..0000000
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag-canvas/index.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-    name:'vue3ResizeDragCanvas'
-})
-</script>
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts
index c6a8b8f..89f25ba 100644
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/drag.ts
+++ b/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;
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/resize.ts b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/resize.ts
index 3ea3010..3c62b0c 100644
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/func/resize.ts
+++ b/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;
diff --git a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue b/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue
index 78e4502..1f1f2f1 100644
--- a/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue
+++ b/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,