Jump to content


Feature Request: Allow Draggable to emit events

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

This came up in my thread from earlier today and ties into another recent thread about events in TweenMax.


I'd like to make a feature request for Draggable to emit events (onPress, onDrag, onThrow, etc.). 


This feature will allow the decoupling of our code from the create function and encourage good coding practice and organisation. 

Unlike TweenMax, Draggable is heavily tied to the DOM and so I think this is a reasonable request.


At the moment I'm doing this using pub/sub to emit the events from within the Draggable init code. It works but it is an extra step.


Here is a good example - the PageModule and the HeaderModule are logically separate pieces of code. The PageModule doesn't know about the HeaderModule, it just emits events.


Jack, Carl, what do you think?

See the Pen pJgpBw by oisinlavery (@oisinlavery) on CodePen

Link to comment
Share on other sites

Thanks for the suggestion, usheeen. Just to make sure I understand correctly, are you saying that you'd want Draggable to have 2 extra methods (something like subscribe() and publish()) that are leveraged for ALL Draggable instances across the board? So, for example, you subscribe to "drag" events and every time any element is Dragged (using Draggable), it publishes an event? 


For the record, Draggable already has event dispatching on an instance level. For example:

yourDraggable.addEventListener("drag", function() {

And of course you can removeEventListener(). 


But it sounds like you're wanting a global "let me subscribe to a particular type of event for ALL instances with a single call". Is that right? It would certainly have an impact on performance, although perhaps it wouldn't be terribly noticeable. It's just that for every event, it'd have to perform a lookup and loop through any findings. As you know, I tend to obsess about performance, so it's tough for me to add things that negatively impact it :)

  • Like 2
Link to comment
Share on other sites

Ooops, how did I miss this! Marking solved.

Link to comment
Share on other sites

Isn't addEventListener just for actual DOM events? So you can't listen for GSAP ones like throwUpdate or throwComplete, correct?

Link to comment
Share on other sites

Nope, it's just for GreenSock events like "drag", "dragend", "dragstart", "press", etc. But you're right - it's not for the TWEEN events, that's true. Only callbacks are available for those. 

Link to comment
Share on other sites

I assumed all. Would it be a big deal to add throwUpdate and throwComplete?

Link to comment
Share on other sites

Let me explore this a bit and get back to you. 

  • Like 1
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.