Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
born2net

Help: Draggable with Angular2 component (Plunker created)

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 post
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 post
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 post
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 post
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,

regards,

Sean.

Link to post
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 post
Share on other sites

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 post
Share on other sites

Hi Campa,

 

Welcome to the GreenSock forums.

 

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

 

http://prntscr.com/k20qod

 

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

 

 

Happy to help. 

Link to post
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.

×