Why double click sets my Raphael SET coordinates wrong?

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

score 0 · Accepted Answer · answered May 28 '13 at 21:30

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) {}
);

Why double click sets my Raphael SET coordinates wrong?

1 Answers1