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

Found an interesting fix: you can avoid the situation if you add an epsilon to both this.original_x and this.original_y. The problem seems to disappear if this.original_x and this.original_y are not exactly the same as the starting coordinates. Check out: http://jsfiddle.net/6ozsfdaf/13/

this.up = function() {
    var ts; 
    this.original_x += 0.0000000001;
    this.original_y += 0.0000000001;
    var transformString = "t" + this.original_x + "," + this.original_y;
    this.attr("transform", transformString);
    console.log("transformString: " + transformString);
    console.log("transformAttrib: " + this.attr("transform"));

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

EDIT Found the problem. In Raphael, Raphael.parseTransformString()'s output is cached and reused. In your move() method, you modify the output of Raphael.parseTransformString(), and Raphael tries to use your modified array when you supply it with the same string. This happens when the first drag() event is registered. You ask it to parse the current place, and then update the output array of arrays with the new location. And then, way later, when this.up() is called, you supply the Raphael.parseTransformString() with the same string. Raphael then uses your modified array of arrays. This is the fixed fiddle: http://jsfiddle.net/6ozsfdaf/16/

And here is the code (use a new array of arrays to transform when moved each time):

this.move = function(dx, dy) {
    var ts = [];
    ts.push(new Array('t'));
    ts[0][1] = this.original_x + dx; 
    ts[0][2] = this.original_y + dy; 
    this.attr({transform: ts.toString()});
};