Draggable are not detecting onClick Event

See original GitHub issue

I am using useSortable and I want to listen to onClick event handler as well, but it is not detecting the click (double click as well). I am just doing as simple as that. How to detect the double click event on draggable ? ?

<div
                ref={setNodeRef}
                {...attributes}
                {...listeners}
                style={style}
                onClick={(e) => {
                    if (e.detail == 2) {
                        console.log("Double Clicked")
                    }
                }}
            >
                Card
</div>

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
claudericcommented, Jun 21, 2022

Add a delay or distance activation constraint, or use a drag handle.

1reaction
MuhammadHamzaChippacommented, Jun 23, 2022

onMouseDown event is working fine as well.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Draggable: HTML click event not triggering onClick handler
It sets up a Draggable with an `onClick` listener which should turn the square blue when it is clicked. You can try this...
Read more >
How to make my draggable div not run the onClick function ...
So I have a menu div that is draggable. Right now it's working almost perfectly, except when my mouse goes up, it sets...
Read more >
ondrag Event - W3Schools
The ondrag event occurs when an element or text selection is being dragged. Drag and drop is a common feature in HTML. It...
Read more >
React Mouse Events — Clicking, Dragging and Dropping, with ...
onDrag is for when the user is dragging the element. Since it fires continuously (every 350 ms) while the user is dragging, it's...
Read more >
HTMLElement: drag event - Web APIs | MDN
body { /* Prevent the user selecting text in the example */ user-select: none; } #draggable { text-align: center; background: white; } ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found