Why double click sets my Raphael SET coordinates wrong? - raphael

Question

I am using Raphael library to draw and work with objects in my extjs app. Basically I was able to find a way to DRAG the SET the following way:
var set = paper.set();
set.push(
paper.circle(200,200,65).attr({fill: "orange", stroke: "black"}),
paper.text(200, 200, buttonText).attr({"font-size": 24, "font-weight": "bold", fill: "black"})
);
set.data("myset", set);
set.data("position", [0,0]);
var current_position = [0,0];
set.drag(
function(dx, dy) {
this.data('myset').transform("T" + (this.data("position")[0] + dx) + "," + (this.data("position")[1] + dy));
current_position = [dx,dy];
},
function() {
this.data('myset').data("position",
[this.data("position")[0] += current_position[0],
this.data("position")[1] += current_position[1]
]);
}
);
I found this little code in jsFiddle and modified it a little to do what I need. You can check out the demo here. When you are dragging the item by clicking on it once, then everything seams to work. But the problem is that when you doublclick on it couple of times and play with it/drag, it starts to jump around. The coordinates get messed up.
Could you help me to find where my coordinates get messed up. Thanks

Answer 1

I fixed it by looking at this example: here
var paper = Raphael(0, 0, 500, 500);
var set = paper.set();
set.push(paper.circle(100,100,35), paper.circle(150,150,15));
set.attr("fill", "orange");
set.data("myset", set);
set.drag(
function(dx, dy, x, y, e) {
this.data('myset').transform("T" + dx + "," + dy);
},
function(x, y, e) {},
function(e) {}
);