Draggable: Drag events supersede click events

Created on 13 Oct 2017 · 7Comments · Source: Shopify/draggable

Bug, documentation issue, user error?

I have an element that may become 'active' if clicked by the user. I also want to allow that element to be draggable. Currently, it seems that drag events are superseding click events (and in this case, impedes them, regardless of binding order). It's essential to my user experience that click events precede drag events. I'm guessing this isn't an edge-case.

bug

Source

rickghome

Most helpful comment

I can reproduce. You could use the delay option to delay the drag action (for now). It works for Draggable, Sortable, Swappable and Droppable.

new Sortable(containers, {
  delay: 200,
});

// or

new Draggable(containers, {
  delay: 200,
});

This is not ideal nor obvious. Will look for a better solution 👍 thanks for reporting

tsov on 13 Oct 2017

👍5

All 7 comments

I can reproduce. You could use the delay option to delay the drag action (for now). It works for Draggable, Sortable, Swappable and Droppable.

new Sortable(containers, {
  delay: 200,
});

// or

new Draggable(containers, {
  delay: 200,
});

This is not ideal nor obvious. Will look for a better solution 👍 thanks for reporting

tsov on 13 Oct 2017

👍5

I have the same issue.

Adding delay helps with clicking, but if I try to drag without waiting a bit, I get strange "ghosting" effect, where mirror element gets stuck to the cursor and does not disappear.

Here's gif: https://i.imgur.com/b0zwVkk.gifv

rolandasb on 24 Oct 2017

@rbarysas yes, this seems to be an issue with the current mouse sensor, it needs to prevent native drag elements (images and links) if the delay is bigger.

This is fixed with a general sensor refactor for the upcoming v1.0.0-beta.3 release, commit is here: https://github.com/Shopify/draggable/commit/7432c9ac2ac4920a4a33600c3968825b256943cb

I will leave this open until we release the new beta.

tsov on 26 Oct 2017

This is awesome. Thanks for the work! 👏

rolandasb on 26 Oct 2017

@rickghome can you confirm if your problem persists in the new beta release?

@rbarysas your issue should be fixed now!

tsov on 1 Nov 2017

🎉1

Will try today.

Sent from my iPhone

On Nov 1, 2017, at 6:55 AM, Max Hoffmann notifications@github.com wrote:

@rickghome can you confirm if your problem persists in the new beta release?

@rbarysas your issue should be fixed now!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.