question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Distinguish between click and drag

See original GitHub issue

Now every click triggers both onStart and onEnd. It would be nice if I could specify maximum mouse offset and/or timeout until which drag operation will not start.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:26
  • Comments:24

github_iconTop GitHub Comments

2reactions
bmpintocommented, May 16, 2019

Since every click fires the onStart and onStop callbacks we can set a flag onDrag so we know we’re dragging and check it onStop, like so:

// class property
this.isDragging = false;

<Draggable
  onDrag={() => this.isDragging = true}
  onStop={() => {
    if (!isDragging) {
      // onClick stuff here
    }

    this.isDragging = false;
  }
/>
1reaction
noaLeibmancommented, May 5, 2021

@yjaju Hey! I used onStop incorrectly and returned false in my implementation… so that was my problem. But thank you anyway!😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - How to distinguish mouse "click" and "drag"
I updated the answer with an explanation. Basically if your finger less than 6 pixels, it will still count as a click. If...
Read more >
Differentiate between a Click and Swipe/Drag event in React
First, let us consider what makes a click different from a swipe. Both involve a mousedown and mouseup action but a swipe involves...
Read more >
Distinguish between click / drag - Questions - Babylon.js
Drag is a state that you can get from your pointer down and pointer up. while pointer down is triggered, and before pointer...
Read more >
Drag'n'Drop with mouse events
Summary · Events flow: ball.mousedown → document.mousemove → ball. · At the drag start – remember the initial shift of the pointer relative...
Read more >
Distinguish between click and drag · Issue #350
For regular onClick to occur it is enough to have 'mousedown' and 'mouseup' on thee same element. So with draggable there is ambiguity...
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