How do I link and drag 2 Circle shapes in Raphael JS?

Question

For some reason i can get this working with rectangle variables but not with circles. At the moment, this code allows both circles to be dragged independently but not together

Anybody know how to fix this or an alternative method?

addIntermediateSymbol = function()
{
    var Intermediate = raphaelReference.set();
    Intermediate.push(
        raphaelReference.circle(74, 79, 20).attr({fill: "#ff7f00",stroke: "#000000",'stroke-width': 3}),
        raphaelReference.circle(74, 79, 10).attr({fill: "#ff7f00",stroke: "#000000",'stroke-width': 4})
        );

var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    ;
};
Intermediate.drag(move, start, up);
}

Answer 1

You have to use Intermediate again in the drag functions (start, move, up), but with translate function (which make everybody in the set move in the same way):

var start = function () {
    Intermediate.oBB = Intermediate.getBBox();
},
move = function (dx, dy) {
    var bb = Intermediate.getBBox();
    Intermediate.translate(Intermediate.oBB.x - bb.x + dx, Intermediate.oBB.y - bb.y + dy);
},

See http://irunmywebsite.com/raphael/additionalhelp.php?v=1&q=anglebannersoncurves#PAGETOP (click on "Draggable Set" down of the right hand side list of examples)

It seems Intermediate.func() is just mapping the property func() to the elements inside of the set (applies to drag() and translate()), like:

for (var shape in Intermediate) {shape.func();}

About monkee answer:

• As monkee points it out, in the dragging methods this references the clicked SVG object
• Raphael sets don't have "cx" as such, so Intermediate.attr({cx:this.ox ... is working only if all the elements of the set are circles and have the same geometrical center ...