We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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;
4.4.6 https://github.com/react-grid-layout/react-draggable/assets/59780565/3594f5b5-9b4e-4659-aefd-6a5f60205037
4.4.5 https://github.com/react-grid-layout/react-draggable/assets/59780565/b7e8384d-1707-4f68-ad00-cc71affd61f0
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} onDrag={handleDrag} > <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
The text was updated successfully, but these errors were encountered:
Seems related to this: #2003
Sorry, something went wrong.
No branches or pull requests
In version 4.4.6, the mouse leaves the draggable component.
When not to use state
4.4.6
https://github.com/react-grid-layout/react-draggable/assets/59780565/3594f5b5-9b4e-4659-aefd-6a5f60205037
4.4.5
https://github.com/react-grid-layout/react-draggable/assets/59780565/b7e8384d-1707-4f68-ad00-cc71affd61f0
When to use states
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
The text was updated successfully, but these errors were encountered: