Jump to content
GreenSock

danwoods

Stop Draggable onPress

Go to solution Solved by danwoods,

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

Hello,

  I have an issue involving multiple draggables within the same element (a coverflow of dials). I'd like to not fire the coverflow drag when a user is trying to set a dial. Is there a way to stop the drag via it's onPress function (eg: if the click/touch event's target element is part of the dial, stop the drag)?

 

(This concept seems simple enough not to warrant a codepen, but I can add one if it would be helpful)

 

Thanks in advance,

Dan

Link to comment
Share on other sites

Hi danwoods  :)

 

Pls make a reduce Codepen Demo available

 

but for now pls try these :

onPress : function() {  this.pointerEvent.stopPropagation();  }

or

onPress: function(e) { e.stopPropagation(); }

or

onDragStart:function(){ ParentDrag[0].disable(); }, // ParentDrag = parent element Draggable
onDragEnd:function(){ ParentDrag[0].enable(); }
  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks. I realized that my coverflow functionality was within an `onDragEnd()` end function, so I was able to check the event target there and then return immediately if it matched  the inner drag (dial) trigger...

 

Thanks again

 

FWIW, e.stopPropagation() never seemed to stop any of the drags...

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

As Diaco points it is always to set up a codepen sample, that's why the only sticky post in the forums is an extensive guide on that and also when you create a new thread there's some insistence to provide a link to a live sample, which also can be JSBin or JSFiddle.

 

Also as Diaco points the best and simplest choice is to stop the click event from bubbling up through the DOM. I set up a simple codepen showing that, feel free to fork and adapt it to your scenario:

 

See the Pen yNYYje by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hey Dan,

 

Glad that you solved.

 

Although this intrigues me:

FWIW, e.stopPropagation() never seemed to stop any of the drags...

Could you provide a sample, because as you can see in the codepen in my previous post, e.stopPropagation() does works.

 

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo,

  stopPropagation() does work in your example, not sure why it wasn't working for me. It will take me a while to prune my code down to a simple example, but if I have the time, I'll create a codepen..

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