Distinguish between click and drag

[mixtur]

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.

[onokje]

Yes, this please!

[ibc]

Basically I cannot place any <input> element within the Draggable because when focusing it, it automatically looses the focus and it's impossible to write into it...

[bmpinto]

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;
  }
/>

[mixtur]

I think you'll never enter section inside your if then.

[mixtur]

Ow. Sorry, you are right of course. But the point is to not do it manually and hide this logic inside react-draggable. Also this is a special case of minimum mouse offset. Namely zero offset.
But if element weren't draggable it would trigger click even if there were any offset. For regular onClick to occur it is enough to have 'mousedown' and 'mouseup' on thee same element.
So with draggable there is ambiguity on what user means if he or she does mousedown-mouseup on the same element even if there is some mousemove in between. Users aren't perfect, they can twitch a little when clicking.

[mixtur]

@ibc you can call stopPropagation for mousedown on your input.

[ibc]

@ibc you can call stopPropagation for mousedown on your input.

Yes, but I don't want to (or just can't) pollute 3rd party components that I want to put over the draggable container.

[Izhaki]

Another use case (where @bmpinto solution doesn't work):

We have multiple elements within a div. Some of these elements are draggable and some are clickable. Upon onStart we check if an item is draggable and if not we return false.

Problem is that if an element is clickable, it is not draggable, which means we get neither onDrag nor onStop.

As with #419, a drag also produces a superfluous click at the end.

---

Edit: For my use case, turns out mouseDown is the way to go when wanting to select something.

[ilias-t]

Yeah this confused me as well, basically onStart prevents any click event from continuing the event capture phase, while onDrag does not. Therefore changing to former to the latter fixed the issue for me.

[ppezaris]

I have a similar use-case which I've done the workarounds for, but it still provides a suboptimal user experience.

My use-case is trying to replicate the headers in the VS Code sidebar -- you can click to expand/collapse them, but you can also drag them to re-order.

You'll notice that in vscode you need to drag about 3 pixels before the clone of the element appears at your mouse location -- this works well because clicks are treated as clicks, and drags as drags.

Even with the workaround above, I find that unless I'm super-precise when clicking, and don't move the mouse even 1 pixel, I get the drag animation when what I was really doing was a "slightly sloppy" click.

I'd like the Draggable to not start firing onStart or onDrag until the mouse has moved at least minimum pixels. Is there another workaround that I'm not considering?

[yashvijaju]

Hey, I'm facing a similar problem with OnClick & OnDrag.

Currently, I have to click, and then the draggable piece will follow my mouse. I think it'd be a bit more intuitive if all I had to do was hold down click and drag, then release to drop the draggable piece to the dragged location. (Demo : the road pieces in https://detour-bus-site.web.app/)

How can I fix this? Drag seems to work fine on mobile devices, but creates this issue on desktop for me.

[sankarnarayanansr]

Make your component controlled using position then you can detect click and drag by change in coordinates.

[yashvijaju]

Make your component controlled using position then you can detect click and drag by change in coordinates.

I am using position to control the component. However, I am unable to click and drag. Instead, I have to click and the object then follows my mouse.