Drag, drop and shape rotation with Raphael JS

Question

I\'m using RaphaelJS 2.0 to create several shapes in a div. Each shape needs to be able to be dragged and dropped within the bounds of the div, independently. Upon double

Answer 1

I've tried several times to wrap my head around the new transform engine, to no avail. So, I've gone back to first principles.

I've finally managed to correctly drag and drop an object thats undergone several transformations, after trying to work out the impact of the different transformations - t,T,...t,...T,r,R etc...

So, here's the crux of the solution

var ox = 0;
var oy = 0;

function drag_start(e) 
{
};


function drag_move(dx, dy, posx, posy) 
{


   r1.attr({fill: "#fa0"});

   //
   // Here's the interesting part, apply an absolute transform 
   // with the dx,dy coordinates minus the previous value for dx and dy
   //
   r1.attr({
    transform: "...T" + (dx - ox) + "," + (dy - oy)
   });

   //
   // store the previous versions of dx,dy for use in the next move call.
   //
   ox = dx;
   oy = dy;
}


function drag_up(e) 
{
   // nothing here
}

That's it. Stupidly simple, and I'm sure it's occurred to loads of people already, but maybe someone might find it useful.

Here's a fiddle for you to play around with.

... and this is a working solution for the initial question.