Raphael.js attr function sets wrong value

Question

I\'m implementing a drag and drop system with Raphael.js. For this, i\'m storing the original x and y position on mousedown, and if there is a collision on mouseup, I want to re

Answer 1

I'm not quite sure why that problem happens yet, but I'm wondering if this may be a better solution anyway. Rather than parsing the strings each time, just store the transform and use that.

I've also switched it to use the transform() method, rather than the attr(transform:..) method. Whilst I think that would normally work, its not quite right logically, as SVG attributes don't take a Raphael transform string, but I assume Raph would intercept that and deal with it (but maybe more error prone).

Its also worth bearing in mind in a transform string that 't' is a relative transform and 'T' is an absolute transform (I don't think thats the issue as there's no preceding transform, but I was wondering if its also related).

this.start = function() {
    if (this.reference.static) return;
    this.original_t = this.transform();
    this.animate({r: 70, opacity: 0.25}, 500, ">");
};

this.move = function(dx, dy) {
    this.transform( this.original_t + 't' + dx + ',' + dy);
};

this.up = function() {
    this.transform( this.original_t );
    console.log("transformString: " + this.original_t);
    console.log("transformAttrib: " + this.transform());

    this.attr({fill: "#fff"});
    this.animate({r: 50, opacity: 1}, 500, ">");
};

jsfiddle