Jump to content
Search Community

Draggable with foreignObject doesn't work as expected in Google Chrome browser

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 have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is:

  •  Child (the cyan rows) should also be dragged along with the parent (greyed area)
  •  Child (the cyan rows) should be independently draggable within that grey area

This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome

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

Link to comment
Share on other sites

Why are you even using foreignObject? I would not recommended using foreignObject for anything that involves user interaction or animation. It's just not reliable and messes up the current transformation matrix.

 

Nest SVG in HTML, not the other way around.

  • Like 3
Link to comment
Share on other sites

17 hours ago, OSUblake said:

Why are you even using foreignObject? I would not recommended using foreignObject for anything that involves user interaction or animation. It's just not reliable and messes up the current transformation matrix.

 

Nest SVG in HTML, not the other way around.

Hi OSUblake

 

Thank you for your reply.

I am using HTML divs inside foreignObject because I would like to have

  • scroll bar enabled (greyed area must have scroll bar)
  • drag and drop to other HTML elements which
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...