[Draggable - multiple layers]

I've got a project where I've set up multiple circular dials, one within the other.  If you rotate one, it rotates the other at a different rate of speed.  One of the problems is that since they are divs that overlap, they are square and thus the inner dial will sometimes overlap the dial below it (since it's rotated at an angle, the corner of the square covers up much of the layers below it).

 

I would love to use the built-in click and touch handlers that Draggable has, is there a way to get all events of the Draggable object and determine the users' intent and instead of spinning the top-most layer it interacts with the correct layer below it?  I will try to create a CodePen example shortly.

[Firefox: Draggable + SVG]

Great find Jamie, thanks!

[Firefox: Draggable + SVG]

Yeah, it appears that the transform is not working in Firefox on any SVG element, only the container <div>, which is my current workaround.

 

It does look like the property 'rotate' does work though.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

[Firefox: Draggable + SVG]

Here's an odd one.  Rotation for SVG elements doesn't seem to work in Firefox.  Does anyone know if there's a workaround?

 

See the Pen mjxtC by Mode7James (@Mode7James) on CodePen

[Draggable + ThrowProps problems]

Hey Rodrigo, thanks for the reply, it turns out I was mixing an older ThrowProps plugin with the newer CSSPlugin.  I've gotten the latest ThrowProps version and it's all smooth as butter now.

[Draggable + ThrowProps problems]

I've created an SVG dial that rotates just fine with Draggable, however when I enable "throwProps" when I release the mouse it flings it in one direction or the other much faster than expected, and not in the direction it should be either.  Has anyone had this issue?