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

[UmerHayyat]

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.

[OSUblake]

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.

[UmerHayyat]

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

[GreenSock]

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). 

[OSUblake]

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