10000 Draggable does not work as intended in 4.4.6. (Normal operation in 4.4.5) · Issue #738 · react-grid-layout/react-draggable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Open
Lee-Minhoon opened this issue Nov 22, 2023 · 2 comments
Open

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

Lee-Minhoon opened this issue Nov 22, 2023 · 2 comments

Comments

@Lee-Minhoon
Copy link
Lee-Minhoon commented Nov 22, 2023 •
edited
Loading

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}
      
    >
      <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 •
edited
Loading

Seems related to this: #2003

@kaifeiji kaifeiji mentioned this issue Jun 6, 2024
Closed
6CD0
@pjanaya
Copy link
pjanaya commented Apr 1, 2025

I'm experiencing this exact same issue. Downgrading the library to 4.4.5 seems to fix it. I'm using React 18.3.1. Are there some breaking changes required after upgrading to 4.4.6?

@STRML Are you sure this is not an issue as you suggested in #756?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pjanaya @AndreiAyar @Lee-Minhoon
0