浏览代码

fix dialog jump

Michael Wang 3 年之前
父节点
当前提交
c89e21d49f
共有 1 个文件被更改,包括 18 次插入7 次删除
  1. 18 7
      src/components/QmDialog.vue

+ 18 - 7
src/components/QmDialog.vue

@@ -85,24 +85,35 @@ export default defineComponent({
       document.addEventListener("mousemove", handleDragMouseMove);
       document.addEventListener("mouseup", handleDragMouseUp);
       // console.log(e);
-      const { offsetX, offsetY } = e;
-      mousePosition.offsetX = offsetX;
-      mousePosition.offsetY = offsetY;
+      const { clientX, clientY } = e;
+      mousePosition.offsetX = clientX;
+      mousePosition.offsetY = clientY;
     };
     const handleDragMouseMove = (e: MouseEvent) => {
       const { clientX, clientY } = e;
       const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
-      const newXRatio = (clientX - mousePosition.offsetX) / windowWidth;
-      const newYRatio = (clientY - mousePosition.offsetY) / windowHeight;
+      const newXRatio =
+        parseFloat(positionStyle.left) / 100 +
+        (clientX - mousePosition.offsetX) / windowWidth;
+      const newYRatio =
+        parseFloat(positionStyle.top) / 100 +
+        (clientY - mousePosition.offsetY) / windowHeight;
       // console.log({
       //   offsetX: mousePosition.offsetX,
       //   offsetY: mousePosition.offsetY,
       //   newYRatio,
       //   newXRatio,
       // });
-      positionStyle.top = newYRatio * 100 + "%";
-      positionStyle.left = newXRatio * 100 + "%";
+      if (newYRatio > 0 && newYRatio < 0.95) {
+        positionStyle.top = newYRatio * 100 + "%";
+      }
+      if (newXRatio > 0 && newXRatio < 0.95) {
+        positionStyle.left = newXRatio * 100 + "%";
+      }
+
+      mousePosition.offsetX = clientX;
+      mousePosition.offsetY = clientY;
     };
     const handleDragMouseUp = (e: MouseEvent) => {
       mousePosition.offsetX = 0;