Browse Source

解决bug:抽屉按钮,拖拽按钮时,只能上下移动,不能左右移动

dengdx 2 months ago
parent
commit
3683bc8310
1 changed files with 6 additions and 8 deletions
  1. 6 8
      src/layouts/NavbarFloat.tsx

+ 6 - 8
src/layouts/NavbarFloat.tsx

@@ -25,8 +25,8 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
   React.useEffect(() => {
     // 组件挂载后再安全访问 window
     setBtnPos({
-      x: window.innerWidth - 96,
-      y: window.innerHeight - 96,
+      x: window.innerWidth - 100,
+      y: window.innerHeight - 100,
     });
   }, []);
   const [dragged, setDragged] = useState(false);
@@ -50,8 +50,8 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
     let x = e.clientX - offset.current.x;
     let y = e.clientY - offset.current.y;
     // 限制在窗口内
-    x = Math.max(0, Math.min(window.innerWidth - 80, x));
-    y = Math.max(0, Math.min(window.innerHeight - 80, y));
+    x = Math.max(0, Math.min(window.innerWidth - 64, x));
+    y = Math.max(0, Math.min(window.innerHeight - 64, y));
     setBtnPos({ x, y });
     setDragged(true); // 标记为拖拽
   };
@@ -104,10 +104,8 @@ const NavbarFloat: React.FC<NavbarFloatProps> = ({
         <div
           style={{
             position: 'fixed',
-            left: undefined,
-            top: undefined,
-            right: window.innerWidth - btnPos.x,
-            bottom: window.innerHeight - btnPos.y,
+            left: btnPos.x,
+            top: btnPos.y,
             zIndex: 1100,
             cursor: 'grab',
           }}