- v1.1: squished fridge to make it fit on the screen better
- v1.2: unrotated horse because it was sticking in place
- v1.3: enlarged mayonnaise in response to user feedback
- v1.4: safari fixes (thanks, @ticky!)
I'm a gay crime skunk who writes internet porn and I demand to be treated with respect.
You can visualize the problem by setting a background color for the divs: Essentially, they're layered over each other and without adding svg crimes to our list of sins we don't have any way of being more selective about where we process pointer events on a div, and where we don't :<
As far as I can tell tho svgs aren't great with interactability. Like, they're just graphics on their own and don't have anything like the
resize: property. So, we have something that allows us to be far more precise about where we want pointer events to happen, and something that can use pointer events to do fun things, and they don't play nice on that front.
Theoretically if one could swap around the render order dynamically depending on the sizes of the objects, i.e. if div A is greater in width and height than div B, reorder it to be behind div B, (either through the actual order of the elements in the html code, or the css
order property, by my understanding) one would be able to get around this but that sounds like something we can't do without scripting
Yeah, that seems to be the size of it. I think you could get a little mileage by making the divs the same size as the spans to start and placing them with top:/left: so they're all draggable initially, but you'll still get divs covering each other up eventually.