clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
13.11k stars 650 forks source link

Do not capture drag events #1028

Open fvanwijk opened 1 year ago

fvanwijk commented 1 year ago

I have a draggable card that has a button inside. By default the button click handlers are not triggered because the drag events are captured.

As a workaround I have configured a DistanceConstraint, so that when you drag more than 5px, we are dragging, else we are clicking. This is not ideal. I want both events to trigger.

Here is an example

I'd like to have a parameter for useDraggable to disable capturing.

clauderic commented 1 year ago

Why do you need click events to fire after a drag and drop operation? The library aggressively tries to prevent this behaviour because it is generally undesirable.

chaodonghu commented 1 year ago

@fvanwijk I believe you can fire your button click handlers using the useDndMonitor hook, so when an element is dragged you fire the event in onDragStart or onDragMove.

useDndMonitor({
    onDragStart(event) {},
    onDragMove(event) {},
    onDragOver(event) {},
    onDragEnd(event) {},
    onDragCancel(event) {},
});
pranav-maheshwari-toddleapp commented 9 months ago

I'm creating a nested accordion that'll have a drag and drop functionality. But somehow onDragOver is not getting fired. Can someone help me with this?