Jump to content
GreenSock

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

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

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

Yeah, sorry @UmerHayyat but I don't think you'll get very good cross-browser support for that kind of thing. It's much better to put SVG into HTML rather than the other way around (at least in my experience). 

  • Like 2
Link to comment
Share on other sites

You can make a scrollbar anywhere, and drag to other HTML elements with a little work. This thread might be worth checking out.

 

 

  • Like 3
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.
×