Jump to content


Help: Draggable with Angular2 component (Plunker created)

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

In GreenSock (gsap) and  Angular2, Drag animation does not work with components.
I created a Plunker:
     <div style="width: 1000px">
            <alert-danger style="float: left; padding: 30px" class="drag" *ngFor="let c of [1,2,3,4]"></alert-danger>
and I wonder if its possible to have the Draggable work on components?
It seems as if the selector is only selecting the 1st child,
Thanks for reading,


See the Pen by edit (@edit) on CodePen

Link to comment
Share on other sites

Let me guess: you're looking in Chrome? Yeah, they implemented pointer events recently along with some bugs (thanks Chrome!). I'll spare you the explanation (unless you request it), but you should be able to fix it by either using the latest version of GSAP/Draggable (I noticed you're linking to "latest" in the CDN, but the CDN provider refuses to update that directory for the past year or more, so it's best to link directly to 1.19.1) -OR- by setting: allowNativeTouchScrolling:false. 

Link to comment
Share on other sites

Thanks for the quick reply.

Yes, Chrome it is.

Any chance you can fix in Plunkr so I can see how it works...

TX again,

FYI I am deeply involved in the ng2 comminity and plan on pushing gsap in ng2... to everyone!

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
Link to comment
Share on other sites

I have tried in my code 1.19.1 and same issue

I believe (and could be wrong) that it is not working because I am using components instead of pure elements.

Link to comment
Share on other sites

Sure, I just changed .../latest/... to .../1.19.1/... in the CDN links:



For convenience I also added the allowNativeTouchScrolling:false to the Draggable.create(), though that's probably not necessary. 


Very happy to hear you're spreading the word about GSAP among the ng2 community. Let us know if you need anything else. 


Happy tweening!

Link to comment
Share on other sites

sorry my fault, I didn't explain well.

what is supposed to happen is that when you select any of the components you should be able to re-sort the order.

but it still not working on your plunkr either,



Link to comment
Share on other sites

Hi Jack,

just want to make sure you saw my last post



Link to comment
Share on other sites

Hm, it looks like your code is only creating a Draggable for the very first one. Right? Seems perfectly draggable to me :) And you're keeping it within the bounds of its parent. 


You're doing a document.querySelector('.drag') once (and of course that only returns one element), and creating a draggable instance for its children. But each of your nav elements are nested in a different ".drag" element. See what I mean? 


Sorry, I'm not an Angular person and I don't have a lot of time to rework the demo, but hopefully that'll get you moving in the right direction. 

Link to comment
Share on other sites

  • 1 year later...

is it just me or this plunker doesn't work? I'm trying it on chrome and firefox, but it always stays in loading state

Link to comment
Share on other sites

Hi Campa,


Welcome to the GreenSock forums.


it looks like there are some errors loading resources on the plunker side




If you need help with something related to GSAP, please start a new thread.



Happy to help. 

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.