Jump to content
GreenSock

crabcreative

Draggable with cta

Go to solution Solved by Jonathan,

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

I'm building this "cards" that stack on top of each other and you can drag them to the right to remove it from the stack and to the left to bring the previous one back.

 

This cards also have CTA, trough a "read more" button or, if it's an image, the whole card is a CTA.

 

The "problem" is that the CTA prevents the card from dragging, which is an expected behaviour.

 

Is there a way where a user can drag the cards and still be able to press the CTA?

 

(fyi, the user can drag anywhere on the parent div of the cards to drag them).

See the Pen QKYVZk by ricnunes (@ricnunes) on CodePen

Link to comment
Share on other sites

  • Solution

Hello  crabcreative, and Welcome to the GreenSock Forum!

 

You could try and add data-clickable="true" to the elements you still want clickable.

<a href="http://www.google.com" data-clickable="true">Test Link</a>

Please see the Draggable Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

  • dragClickables : Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true.

Does that help? :)

  • Like 2
Link to comment
Share on other sites

One of the reasons I love GS so much, you think of every possible situation... Thank you so much Jonathan!!! It does solve it :)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

HI all,

I just noticed that setting dragClickables to true allows to drag the <a> tags, but when the user attempts to right-click them they work just like they were left-clicked, and he is redirected.

I updated @crabcreative's Pen with the parameter.

See the Pen Qryyjv by massic80 (@massic80) on CodePen


Is there any built-in workaround for this?

 

Link to comment
Share on other sites

Thanks for the demo.

I tested in Chrome on Mac and could not replicate the behavior you describe. Right-Click brought up the menu.

In the video below I 

 

  • drag the grey square
  • drag the link
  • right-click the link to show menu

https://greensock.d.pr/pneOCk

 

Is there a particular browser / OS that you are experiencing the problem on?

 

 

  • Like 2
Link to comment
Share on other sites

Hi Carl,

thanks for the quick response!

Actually, I didn't check on a Mac: I just did and it behaves the same of yours.

Unfortunately, on different Windows 10 machines, with both Chrome and Firefox, the link redirected to a blank box.

I just modified the link, adding a target="_blank" attribute, and now the right click opens a new tab with Google.

Link to comment
Share on other sites

I see that behavior on Windows too, but you can fix it with:

 

allowContextMenu:true

 

See the Pen ZoQqBZ by PointC (@PointC) on CodePen

More info:

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Hi, thanks for the suggestion.

I saw that post and tested the same parameter, but it's not enough. On my side, right-clicking "Test Link" in your pen opens the context menu but doesn't prevent the link to "work" (the popup blocker prevents the new tab from opening, when not disabled).

However, even if it worked

- having a different behavior between iOS and Windows doesn't keep me relaxed :)

- a right mouse click should open a context menu or do nothing, not do the same of left click

- allowcontextmenu : true isn't a recommended configuration (citing Jack from your post: The context menu would actually cause problems in several scenarios (like long-taps on mobile devices, etc.)

In my opinion, there is something to tune up.

Link to comment
Share on other sites

hmmm... yep that does still try to load a pop-up. We'll have to see if @GreenSock has any additional thoughts or ideas.

:)

 

  • Haha 1
Link to comment
Share on other sites

@TRIPLESENSE REPLY Sorry about any confusion there. Yeah, dealing with the huge variety of (and conflicting) ways that browsers handle mouse/pointer/touch/scroll events is really complex. And it doesn't help that sometimes browsers (like Chrome) just change their behavior with an update...or have totally different behavior on different operating systems (same browser). Ugh! For example, sometimes the context menu is triggered on press, other times on release. If you hold down the ctrl key when pressing, some browsers make the event.which 3 and others make event.ctrlKey true. Fun!

 

Anyway, I think I figured out what was causing your particular scenario to act that way, and I posted an updated Draggable with a fix - https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). Does that work better for you? 

Link to comment
Share on other sites

11 hours ago, GreenSock said:

@TRIPLESENSE REPLY dealing with the huge variety of (and conflicting) ways that browsers handle mouse/pointer/touch/scroll events is really complex

Oh, yes, I know it's like hell :) That's why we worship your work ;)

 

11 hours ago, GreenSock said:

Anyway, I think I figured out what was causing your particular scenario to act that way, and I posted an updated Draggable with a fix - https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). Does that work better for you? 

 

Bad news on this topic:

See the Pen LmRRvM by massic80 (@massic80) on CodePen

I injected the new script in the same pen (with new URL) and it still attempts to open a new tab, either on Chrome, Firefox, IE11 and Edge on Win 10

 

 

Link to comment
Share on other sites

Ha - of course Windows handled things completely differently. Gotta love it. I think I've got it resolved now, though. Please try again (and clear cache). Better? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi!
Sooo....

Looks OK on either on Chrome, Firefox, IE11 and Edge! :)
allowContextMenu:true is still a mandatory parameter, but this is a good compromise :)

Sidenotes:

  1. on Windows you can drag with right mouse button and looks like that on MacOS you can't.
  2. also on Mac, when allowContextMenu===false, it still attempts to open the link

Thanks again for your assistance!
Are you going to release the amend?

  • Like 1
Link to comment
Share on other sites

Thanks for the confirmation. And yes, we'll release the new version when GSAP 1.20.5 is ready (not 100% sure when that'll be, but hopefully within 2 weeks). Feel free to use the beta for now if you'd like. 

Link to comment
Share on other sites

Thanks a lot!

There is no hurry, my project (cappellini.it, and its siblings Poltrona Frau and Cassina) won't be online within two weeks, and npm will take care of updating the libraries :)

Just a last question: what may the collateral effect be in using allowContextMenu:true?

Link to comment
Share on other sites

7 hours ago, TRIPLESENSE REPLY said:

Just a last question: what may the collateral effect be in using allowContextMenu:true?

 

Well, besides it allowing the context menu? Not much that I can think of. :)

  • Haha 1
Link to comment
Share on other sites

On 27/4/2018 at 6:00 PM, GreenSock said:

 

Well, besides it allowing the context menu? Not much that I can think of. :)

 

OK, I won't consider the following words :)

On 24/4/2018 at 9:33 AM, TRIPLESENSE REPLY said:

- allowcontextmenu : true isn't a recommended configuration (citing Jack from your post: The context menu would actually cause problems in several scenarios (like long-taps on mobile devices, etc.)

Thanks!

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.
×