Это код. Но окно уходит от мыши после первого щелчка. Есть ли способ использовать 3 использования? < /P>
import { BsCircle } from "react-icons/bs";
import { useState, useEffect, useRef, useCallback } from "react";
type Coordinates = {
x: number;
y: number;
};
const Index = () => {
const [Mouse, setMouse] = useState(undefined);
const [newPosition, setNewPosition] = useState(
undefined
);
const [isMoving, setIsMoving] = useState(false);
const [hasMoved, sethasMoved] = useState(false);
const windowRef = useRef(null);
const stylewindowContainer = hasMoved
? {
top: newPosition?.y,
left: newPosition?.x,
position: "fixed" as "fixed",
width: '37.5%',
transform: 'none'
}
: { color: "black" };
const startMoving = useCallback((e: MouseEvent) => {
const Target = e.target as HTMLDivElement;
setIsMoving(true);
sethasMoved(true);
setMouse({
x: e.clientX - Target.getBoundingClientRect().left,
y: e.clientY - Target.getBoundingClientRect().top,
});
if (Mouse) {
setNewPosition({x: e.clientX - Mouse?.x, y: e.clientY - Mouse?.y})
}}, [])
useEffect(() => {
if (!windowRef.current) {
return;
}
const window: HTMLDivElement = windowRef.current;
window.addEventListener("mousedown", startMoving);
return () => {
window.removeEventListener("mousedown", startMoving);
};
}, [startMoving]);
const Moving = useCallback((e: MouseEvent) => {
if (Mouse) {
if (isMoving) {
setNewPosition({x: e.clientX - Mouse?.x, y: e.clientY - Mouse?.y})
}}}, [Mouse, isMoving]);
useEffect(() => {
if (!windowRef.current) {
return;
}
const window: HTMLDivElement = windowRef.current;
window.addEventListener("mousemove", Moving);
return () => {
window.removeEventListener("mousemove", Moving);
};
},[Moving]);
const stopMoving = useCallback(() => {
setIsMoving(false)
},[])
useEffect(() => {
if (!windowRef.current) {
return;
}
const window: HTMLDivElement = windowRef.current;
window.addEventListener("mouseup", stopMoving);
return () => {
window.removeEventListener("mouseup", stopMoving);
};
},[stopMoving]);
return (
something
,
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!
{newPosition?.x} : {newPosition?.y}
Hello World!
);
};
export default Index;
< /code>
Моя начальная логика состояла в том, чтобы получить положение Mousedown в окне, чтобы получить относительную позицию точки, где мы можем удерживать окно. Храните эти координаты в мышью, а затем обновите положение коробки в отношении координат событий MouseMove, вычитающих координат мыши. Кажется, это не работает.
Подробнее здесь: https://stackoverflow.com/questions/714 ... olution-is
