Draggable paths with transform() method in Raphael.js

Question

I'm trying to make a path draggable with the non-deprecated method Element.transform(). Here is the answer to make it with deprecated method Element.translate() :

Making paths and images draggable in Raphael js

When I simply replace translate() by transform(), my path come back to initial position very quickly :

drag(function (dx, dy) {
       var trans_x = dx - this.ox;
       var trans_y = dy - this.oy;

       this.transform("t" + trans_x + "," + trans_y);
       this.ox = dx;
       this.oy = dy;
     }, 
     function () {
       this.ox = 0;
       this.oy = 0;
     },
     function() {
     }
);

Any ideas ?

Answer 1

I found the solution !

Just have to use the append syntax of transform() which is .transform("...t" + .. + ...)

So here is my final result :

drag(function (dx, dy) {
       var trans_x = dx - this.ox;
       var trans_y = dy - this.oy;

       this.transform("...t" + trans_x + "," + trans_y); //Just change this line
       this.ox = dx;
       this.oy = dy;
     }, 
     function () {
       this.ox = 0;
       this.oy = 0;
     },
     function() {
     }
);

and it works perfectly.