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.

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

Bug: onStop returns wrong positions when using grid #413

Closed
flashtheman opened this issue Jul 10, 2019 · 5 comments · Fixed by #621 · May be fixed by #507
Closed

Bug: onStop returns wrong positions when using grid #413

flashtheman opened this issue Jul 10, 2019 · 5 comments · Fixed by #621 · May be fixed by #507

Comments

@flashtheman
Copy link

When using grid, the x and y returned by onStop are incorrect. lastX and lastY however seem to be correct. I can't find a explanation for the values onStop returns for x and y.
I've created an example showing the behavior:

https://codesandbox.io/s/texthighlights-wtrzt

Please have a look at the console output when dragging the object around. I would have expected x and y to change based on the grid of [50,50] but this is not the case.

React-draggable is also used by react-rnd - they also have an issue open for this bug (bokuweb/react-rnd#453)
@flashtheman flashtheman mentioned this issue Jul 10, 2019
Open
@flashtheman flashtheman changed the title Bug: onDStop returns wrong positions when using grid Bug: onStop returns wrong positions when using grid Jul 10, 2019
@jeffkillian
Copy link

Any update on whether anyone is looking into this? I'm experiencing this as well. Dragging to a grid is effectively broken as you can't guarantee that it will stay on that grid.

@jeffkillian
Copy link

jeffkillian commented Sep 2, 2019 •
edited

For anybody who is also experiencing this, I've found an okay workaround.

  1. Make the component controlled (by passing in a position={{x:state.x, y=state.y}})
  2. Use onDragStop, and within that set the state's x and y to the lastX and lastY.

While users can still end a drag in the incorrect position, the view will immediately update after to the proper position.

@nicholaschiang
Copy link

Had the same issue and @jeffkillian's solution worked for me (though I'm not sure why this isn't the default behavior)!

@STRML
Copy link
Collaborator

STRML commented Jul 29, 2020

Thanks for the report. I see two ways we can fix this:

  1. Add the grid logic to onDragStop, or
  2. Don't actually determine control position at all on drag stop, only allowing drag events to actually move the element.

2 is cleaner but I am not 100% sure it will not have side effects. Looking into it.

STRML added a commit that referenced this issue Jul 29, 2020
@STRML
fix(grid): incorrect x and y passed to onStop
8d95806 
This was caused by `onStop` erroneously recalculating coordinates,
which is not necessary / should not happen in the real world, as `mouseup`
and `touchend` should not pass `clientX` and `clientY` values meaningfully
different than the last corresponding move event. In fact, they are already
ignored by `<Draggable>`.

For this reason, we can simply trust the `lastX` and `lastY` in `onDragStop`,
and pass those back.

Fixes #413, bokuweb/react-rnd#453
@STRML STRML mentioned this issue Jul 29, 2020
Open
@andreas-soroko
Copy link

any updates on this?

@BrianHung BrianHung mentioned this issue Jan 7, 2022
Merged
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
5 participants
@STRML @jeffkillian @nicholaschiang @andreas-soroko @flashtheman