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');




   


        
The actual svg markup looks like this (when you've clicked on run)....