Jump to content
Search Community

Parent Child dragging

UmerHayyat 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

Hi, 

 

I am new to Draggable and is evaluating it.

I have seen parent-child examples but don't know why it's not working in my case, I have created a codepen.

I want to move the table (the greyed area in the code pen) along with its cell (the cyan area in the code pen), and allowing the cell to be draggable independently (the cyan area a single row). 

See the Pen RmmEGX by UmerHayyat (@UmerHayyat) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Yeah  this is a bit more complicated since you're using SVG and regular DOM nodes. In this sample I'm using just DOM nodes so everything works in the intended way:

 

See the Pen Ehjbd by rhernando (@rhernando) on CodePen

 

Perhaps you could use a trigger or remove the <div> tag from the SVG altogether and use some other way to position it. I'm not an SVG expert and is the first time I see the <foreignObject> tag actually and my best guess is that using that approach could be the cause of your issues, so beyond what's in my sample and that particular advice I don't know if I can do much more.

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

1 hour ago, UmerHayyat said:

When do you say "trigger" what is it in gsap? and how to use it? any reference will be appreciated.

 

Ahh yes my bad. I meant a Draggable trigger:

 

https://greensock.com/docs/Utilities/Draggable

 

Scroll down a bit in the features and you'll find it. Also here is a simple example:

 

See the Pen IiHgq by rhernando (@rhernando) on CodePen

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

 
 
1
On 6/6/2019 at 11:41 PM, Rodrigo said:

 

Ahh yes my bad. I meant a Draggable trigger:

 

https://greensock.com/docs/Utilities/Draggable

 

Scroll down a bit in the features and you'll find it. Also here is a simple example:

 

 

 

 

Happy Tweening!!

Hei Rodrigo, I just tested my provided pen in Microsoft Edge and FireFox browser and it's perfectly working as expected. I think chrome's implementation is buggy or I need to open a ticket for draggable.

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.
×
×
  • Create New...