From 2431c6d44d76e9d499e0c83d061bf9a19deb5c19 Mon Sep 17 00:00:00 2001
From: Alan Wang <948467222@qq.com>
Date: Wed, 1 Sep 2021 11:04:42 +0800
Subject: [PATCH] fix: el-image-viewer drag have problem (#3133)

* fix: el-image-viewer drag have problem

* Update packages/components/image-viewer/src/index.vue

Co-authored-by: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>

Co-authored-by: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
---
 packages/components/image-viewer/src/index.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/components/image-viewer/src/index.vue b/packages/components/image-viewer/src/index.vue
index 69324abe7b..55f3c85b5a 100644
--- a/packages/components/image-viewer/src/index.vue
+++ b/packages/components/image-viewer/src/index.vue
@@ -242,6 +242,12 @@ export default defineComponent({
       const { offsetX, offsetY } = transform.value
       const startX = e.pageX
       const startY = e.pageY
+
+      const divLeft = wrapper.value.clientLeft
+      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth
+      const divTop = wrapper.value.clientTop
+      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight
+
       _dragHandler = rafThrottle(ev => {
         transform.value = {
           ...transform.value,
@@ -250,7 +256,12 @@ export default defineComponent({
         }
       })
       on(document, 'mousemove', _dragHandler)
-      on(document, 'mouseup', () => {
+      on(document, 'mouseup', (e: MouseEvent) => {
+        const mouseX = e.pageX
+        const mouseY = e.pageY
+        if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom){
+          reset()
+        }
         off(document, 'mousemove', _dragHandler)
       })