search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.55k stars 51 forks source link

Click events #71

Closed goshua13 closed 3 months ago

goshua13 commented 3 years ago

I have been trying to use onDoubleClick and onClick but those events are not working. do you have a workaround?

AlexShaposhnykov commented 2 years ago

Any update on this? I'm having the same issue.

When I nest a button inside my draggable element and try to initiate a drag event by holding and moving my cursor(onMouseDown event to be more exact) over it - nothing works, which is very strange. The issue seems to be that react-movable initiates a drag during the onClick event, which makes interacting with any nested clickable elements pretty much impossible.

Perhaps we can change the logic here a little bit? For example, react-movable could listen for the onMouseDown event and initiate drag after some delay(~200ms)/or movement. This way, we could differentiate between the actual drag event and the onClick event.

tajo commented 2 years ago

react-movable could listen for the onMouseDown

That's how it already works.

Can you provide an example?

AlexShaposhnykov commented 2 years ago

Sure! I created a small code sandbox that illustrates the problem: https://codesandbox.io/s/musing-dan-cbjs5?file=/src/App.tsx. In my case, buttons should act as drag handles and also preserve their original click functionality

tajo commented 2 years ago

Oh, you can't have it both ways. I would recommend a dedicated drag handle button and another button next to it.