Universal Drag/Drop

This example uses matrix transforms, with object methods, not strings. It can seamlessly drag/drop elements that have previously been transformed and reside it different viewPorts. It employs getScreenCTM, createSVGTransform and binds the element to a transform List
A 400x400 DIV contains an SVG with viewBox=0 0 330 330.
1.) The blue rect element is contained in a <g>.
2.) The <g> element has been transformed.
3.) The maroon rect resides in a different viewPort.
4.) The orange circle has been transformed.
5.) Drag/Drop the circles and rectangles.

The drag events are attached to the parent SVG,
and each draggable element is given a class="dragTarget"
HTML Page Values:
: mouse X
: mouse Y

SVG Image Values:
: svg X
: svg Y

SVG Source: