Jump to content
Search Community

Triggered buttons after Dragging

Cyboide test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

In the current Draggable utility, buttons inside the draggable (or scrollable) content are being triggered when the mouse starts on a specific button AND is released on that same button.

 

It is more obvious when testing a div with an onclick event added to it.

 

In the demo the bug is also present, in the Scroll (Drag & Flick) part, on the tiny a tag for the Greensock membership link. But on a tags, it is more difficult to trigger the bug.

 

For now I had to resort to a patch using onDrag and onDragEnd, showing an invisible 100% width and height, transparent div on top (when onDrag) of the content, and of course removing it onDragEnd.

 

 

In theory (??) a click event cannot be prevented (when using a mouse), since it comes from both a mousedown followed by a mouseup...

But still, I wonder, is the Greensock team working on that problem for future releases?

Link to comment
Share on other sites

It definitely behaves differently now in the example you mentioned in the online Draggable demo. Previously, when I clicked on a link, it would drag. Now, it recognizes it as an <a> tag and allows the default behavior (no drag, allows link). Maybe I misunderstood your question. Could you post a very simple codepen or jsfiddle that demonstrates the issue? 

Link to comment
Share on other sites

Hm, I guess you did not understood, nope.

So here is a jsfiddle:

 

http://jsfiddle.net/Cyboide/cRVCe/

 

Now, on the right are btns.

Start a drag from over a btn, then release the mouse on the left column: ok.

But, start a drag from over a btn, then release the drag with the mouse still over the same btn (it doesn’t matter if the mouse went off the btn in between)...

 

You see the click happening (a js alert). The worst is when this action is a link leading to another page...

 

[Edit: it now uses the rc5.]

Edited by Cyboide
Link to comment
Share on other sites

If you want that behavior, you can simply record the y position of the Draggable onDragStart, and then in your click handler, compare it to the current value. If it's less than a certain amount (like 3 pixels), treat it like a click. Otherwise, ignore it. Here's an edited version of your example:

 

http://codepen.io/GreenSock/pen/2a69b04d43e6b492951e512b2e07968b

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...