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