Snap Dragging with a plugin, taking into account currentmatrix
Not sure if this is a good way, but works for a lot of bits I play with
var s = Snap("#svgout");
Snap.plugin( function( Snap, Element, Paper, global ) {
Element.prototype.altDrag = function() {
this.drag( dragMove, dragStart, dragEnd );
return this;
}
var dragStart = function ( x,y,ev ) {
this.data('ot', this.transform().local );
}
var dragMove = function(dx, dy, ev, x, y) {
var tdx, tdy;
var snapInvMatrix = this.transform().diffMatrix.invert();
snapInvMatrix.e = snapInvMatrix.f = 0;
tdx = snapInvMatrix.x( dx,dy ); tdy = snapInvMatrix.y( dx,dy );
this.transform( "t" + [ tdx, tdy ] + this.data('ot') );
}
var dragEnd = function() {
}
});
s.attr({ viewBox: "0 0 100 100" });
var t1 = s.text( 0, 20, "red = altDrag" ).attr({ 'font-size' : "12px" });
var t2 = s.text( 0, 35, "blue = normal drag" ).attr({ 'font-size' : "12px" });
var r1 = s.rect(0,0,20,20).transform('t50,50').attr({ fill: "red" }).altDrag();
var g1 = s.g( r1 ).transform('r45');
var r2 = s.rect(20,20,20,20).transform('t50,50').attr({ fill: " blue" }).drag();
var g2 = s.g( r2 ).transform('r45');