Estoy usando reaccionar con mecanografiado e implementé el ejemplo w3school drag div en mi aplicación de reacción. Ahora, estoy tratando de vincular este div arrastrable dentro del límite. Actualmente, mi caja se está moviendo fuera del contenedor. por favor ayuda cómo lograr esto sin usar ninguna biblioteca de terceros.

Aquí está mi demostración de sandbox

mi código:

 import "./styles.css"; import React, { useRef } from "react"; export default function App() { const dragRef = useRef<HTMLDivElement>(null); let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; const drag = (event: any) => { const boundingBox = dragRef.current; if (boundingBox) { event = event || window.event; event.preventDefault(); pos1 = pos3 - event.clientX; pos2 = pos4 - event.clientY; pos3 = event.clientX; pos4 = event.clientY; boundingBox.style.top = boundingBox.offsetTop - pos2 + "px"; boundingBox.style.left = boundingBox.offsetLeft - pos1 + "px"; } }; const stop = () => { const boundingBox = dragRef.current; if (boundingBox) { boundingBox.onmouseup = null; boundingBox.onmousemove = null; } }; const start = (event: any) => { const box = dragRef.current; if (box) { event = event || window.event; event.preventDefault(); pos3 = event.clientX; pos4 = event.clientY; box.onmouseup = stop; box.onmousemove = drag; } }; return ( <div className="App"> <div ref={dragRef} className="draggableDiv" onMouseDown={start} onMouseMove={drag} onMouseUp={stop} ></div> </div> ); }

y el archivo CSS externo:

 .App { font-family: sans-serif; height: 350px; width: 400px; background-color: rgb(132, 190, 241); position: relative; } .draggableDiv { position: absolute; height: 40px; width: 40px; background-color: red; cursor: grab; }