From ed2c6daad113e2ecdbeb593eb8bda6a4b88a5071 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Wed, 22 Dec 2021 16:37:49 +0800
Subject: [PATCH] =?UTF-8?q?fix(color-picker):=20'=E4=BC=98=E5=8C=96palette?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/color-palette/color-palette.tsx |  2 +-
 .../devui/color-picker/src/utils/domDragger.ts     | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
index 1bd6e577eb..882d8f8746 100644
--- a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
+++ b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
@@ -97,7 +97,7 @@ export default defineComponent({
     onMounted(() => {
       renderCanvas()
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
-        DOMUtils.triggerDragEvent(handlerElement.value, {
+        DOMUtils.triggerDragEvent(paletteInstance.vnode.el as HTMLElement, {
           drag: (event: Event) => {
             clickTransfrom.value = null
             handleDrag(event as MouseEvent)
diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
index e39258faf0..5e520c8073 100644
--- a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
+++ b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
@@ -82,26 +82,28 @@ export class DOMUtils {
     const upFn = (event: Event) => {
       DOMUtils.removeEventListener(document, 'mousemove', moveFn)
       DOMUtils.removeEventListener(document, 'mouseup', upFn)
+      DOMUtils.removeEventListener(document, 'touchmove', moveFn)
+      DOMUtils.removeEventListener(document, 'touchend', upFn)
       document.onselectstart = null
       document.ondragstart = null
 
       isDragging = false
-
       options.end?.(event)
     }
-
-    DOMUtils.addEventListener(element, 'mousedown', (event) => {
+    const downFn = (event: Event) => {
       if (isDragging) return
       document.onselectstart = () => false
       document.ondragstart = () => false
       DOMUtils.addEventListener(document, 'mousemove', moveFn)
       DOMUtils.addEventListener(document, 'mouseup', upFn)
-
+      DOMUtils.addEventListener(document, 'touchmove', moveFn)
+      DOMUtils.addEventListener(document, 'touchend', upFn)
       isDragging = true
 
       options.start?.(event)
-    })
-
+    }
+    DOMUtils.addEventListener(element, 'mousedown', downFn)
+    DOMUtils.addEventListener(element, 'touchstart', downFn)
     return
   }