Jump to content
Search Community

Help: Draggable with Angular2 component (Plunker created)

born2net 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

Hello,
 
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>
        </div>
 
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,
 
Regards,
 
Sean

 

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

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

https://plnkr.co/edit/9nFw7joNcFbFGPWwC06s?p=preview

 

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

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

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