Реактировать функцию перетаскивания изображения не работает - функция, не обнаруживая Mousedown на изображении ⇐ Javascript

[Anonymous]

Я пытаюсь построить приложение для увеличения / перетаскивания изображения, но оно не работает. У меня есть обработчик событий «Mousedown», прикрепленный к изображению, которое я хочу перетаскивать, но его не обнаруживается. Mousedown обнаруживается, когда я прикрепил документ к обработчику событий, но не изображение, я изо всех сил пытаюсь понять, почему. < /P>

document?.removeEventListener("mousedown", handleMouseDown);
< /code>
< /blockquote>
Если у кого -то есть какие -либо предложения, мне было бы интересно услышать их ...
Спасибо. < /p>
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { useState, useEffect } from "react";
import { useRef } from "react";
import img1 from "./img1.jpg";
import img2 from "./img2.jpg";

function App() {
const images = {
1: img1,
2: img2
};

return (



);
}
////////////////////////////////////////////

function ImageZoomInOut({ images }) {
//state for img scale
const [scale, setScale] = useState(1);
//state for img position
const [position, setPosition] = useState({ x: 0, y: 0 });

//reference to the img element
const imageRef = useRef(null);

//zoom in function
function handleZoomIn() {
return setScale((scale) => scale + 0.05);
}
//zoom out function
function handleZoomOut() {
return setScale((scale) => scale - 0.05);
}

//image drag and zoom/////////////////////////////

useEffect(() => {
const image = imageRef.current;
let isDragging = false;
let prevPosition = { x: 0, y: 0 };

//mouse down event handler for starting img drag

const handleMouseDown = (e) => {
isDragging = true;
prevPosition = { x: e.ClientX, y: e.clientY };
};

//mouse move event handler for dragging img

const handleMouseMove = (e) => {
if (!isDragging) return;

const deltaX = e.clientX - prevPosition.x;
const deltaY = e.clientY - prevPosition.y;
prevPosition = { x: e.clientX, y: e.clientY };
setPosition((position) => ({
x: position.x + deltaX,
y: position.y + deltaY,
}));
};

//mouse up event handler for ending img drag

const handleMouseUp = () => {
isDragging = false;
};

const image1 = document.getElementById("2");

//add event listeners
image1.addEventListener("mousedown", handleMouseDown);
image1.addEventListener("mousemove", handleMouseMove);
image1.addEventListener("mouseup", handleMouseUp);

//remove event listners on component unmount
return () => {
image?.removeEventListener("mousedown", handleMouseDown);
image?.removeEventListener("mousemove", handleMouseMove);
image?.removeEventListener("mouseup", handleMouseUp);
};
}, [imageRef, scale]);

//////////
return (



+


-


{/* image element */}
[img]{images[2]}
style={{
width: "900px",
height: "auto",
cursor: "move",
transform: `scale(${scale}) translate(${position.x}px, ${position.y}px)`,
}}
draggable={false}
onClick={() => console.log("hi")}
/>

);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(



);


Подробнее здесь: https://stackoverflow.com/questions/797 ... usedown-on