Open
Description
In version 4.4.6, the mouse leaves the draggable component.
When not to use state
import { useRef } from "react";
import Draggable from "react-draggable";
import "./App.css";
function App() {
const nodeRef = useRef<HTMLDivElement>(null);
return (
<Draggable handle={`.handler`} nodeRef={nodeRef}>
<div ref={nodeRef} style={{ width: "500px" }}>
<div className="handler" style={{ backgroundColor: "gray" }}>
React Draggable 4.4.6
</div>
<div>Body</div>
</div>
</Draggable>
);
}
export default App;
When to use states
import { useCallback, useRef, useState } from "react";
import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
import "./App.css";
function App() {
const nodeRef = useRef<HTMLDivElement>(null);
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleDrag = useCallback((e: DraggableEvent, data: DraggableData) => {
setPosition({ x: data.x, y: data.y });
console.log(data);
}, []);
return (
<Draggable
handle={`.handler`}
nodeRef={nodeRef}
position={position}
>
<div ref={nodeRef} style={{ width: "500px" }}>
<div className="handler" style={{ backgroundColor: "gray" }}>
React Draggable 4.4.6
</div>
<div>Body</div>
</div>
</Draggable>
);
}
export default App;
4.4.6 with console log
https://github.com/react-grid-layout/react-draggable/assets/59780565/a41c47d3-7793-4c68-bae1-f043297eaa22
4.4.5 with console log
https://github.com/react-grid-layout/react-draggable/assets/59780565/04ce9bb2-1aab-43a8-84ff-aea73a704178
Metadata
Metadata
Assignees
Labels
No labels