Help: Draggable with Angular2 component (Plunker created)

[born2net 0 Likes (Newbie)]

Hello,

 

In GreenSock (gsap) and  Angular2, Drag animation does not work with components.

I created a Plunker:

 

https://plnkr.co/edit/D9nHs2knLDUGEzhs4h7i?p=preview

 

     <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

[GreenSock 18,876 Likes (Superhero)]

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. 

[born2net 0 Likes (Newbie)]

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

and source@ https://github.com/born2net/Angular-kitchen-sink

Regards,

 

Sean

[born2net 0 Likes (Newbie)]

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.

[GreenSock 18,876 Likes (Superhero)]

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!

[born2net 0 Likes (Newbie)]

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.

[born2net 0 Likes (Newbie)]

Hi Jack,

just want to make sure you saw my last post

TX

Sean

[GreenSock 18,876 Likes (Superhero)]

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. 

[born2net 0 Likes (Newbie)]

TX!!!!

You were right,

regards

 

Sean

[campa 0 Likes (Newbie)]

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

[Carl 11,324 Likes (Superhero)]

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.