Skip to content
New issue

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

Draggable does not work as intended in 4.4.6. (Normal operation in 4.4.5) #738

Open
Lee-Minhoon opened this issue Nov 22, 2023 · 1 comment

Comments

@Lee-Minhoon
Copy link

Lee-Minhoon commented Nov 22, 2023

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

@AndreiAyar
Copy link

AndreiAyar commented Jan 3, 2024

Seems related to this: #2003

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants