using svg draggable from inside a nested html foreignobject

[timowest]

hi guys,

first of all, i absolutely love greensock, it opened so many doors and made a lot of things easier!

 

at the moment i have an issue using draggable svg.

i am creating a side menu inside my svg which will have a lot of icons/drawings which will be draggable trough my svg, because i need to do a lot of dynamic stuff with this menu i nested a foreignobject (html inside svg) in my svg.

the issue i have right now is that i cannot drag things from the foreignobject(html) into the rest of my svg.

 

i managed to make an almost working solution, by recreating the drawing in my svg on top of the clicked menu drawing(see codepen).

the only problem is that it is not draggable instantly, but has to be clicked and then dragged, which loses its smoothness.

 

i tried a few other things as well such as mousedown but to no avail.

mouseover did work, but only on desktop since on mobile there is no mouseover

 

anybody know some trick or solutions?

thanks in advance

See the Pen MWmYvxJ by Timowest (@Timowest) on CodePen

[Cassie]

Your SVG markup is a little messy, there are a few typos, missing closing tags, and you've got some SVG markup inside that foreignObject tag too.

SVG's pretty forgiving - like HTML, but I think that's probably the issue.

I tidied it up and it seems to work fine, which is actually pretty surprising to me! I would have assumed there would be all sorts of coordinate space mishaps!

See the Pen LYyEzJK by GreenSock (@GreenSock) on CodePen

(Also it would be great to understand what problem you're solving by using foreignobject? My first go to here really would be to see if there's a way to do this without.)