How to tie and drag 2 circle shapes in Raphael JS?

Question

For some reason, I can get this to work with the variables of the rectangle, but not with the circles. At the moment, this code allows you to drag both circles independently of each other, but not together

Does anyone 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 should again use Intermediate in the drag and drop function (start, move, up), but using the translate function (which makes everyone in the set the same):

 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 "Drag Set" down from the list on the right)

It seems that Intermediate.func() just maps the func() property to the elements inside the set (refers to drag() and translate() ), for example:

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

About monkee's answer:

• As monkee points out, in drag and drop methods, this refers to an SVG object with a click
• Raphael sets don't have "cx" per se, so Intermediate.attr({cx:this.ox ... only works if all the elements in the set are circles and have the same geometric center ...

Answer 2

In the move function, "this" refers to the Raphäel object with a click.

Instead:

 move = function (dx, dy) { this.attr({cx: this.ox + dx, cy: this.oy + dy}); } 

Do it:

 move = function (dx, dy) { Intermediate.attr({cx: this.ox + dx, cy: this.oy + dy}); } 

A bad formatted working example here: http://jsbin.com/uxege4/7/edit

Answer 3

Here is a useful js Fiddle solution that does exactly what you want, adapted from http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#pagetop

http://jsfiddle.net/q4vUx/102/

 var paper = Raphael('stage', 300, 300); var r = paper.rect(50,100,30,50).attr({fill:"#FFF"}), c = paper.circle(90,150,10).attr({fill:"#FFF"}), t = paper.text(50, 140, "Hello"); var rr = paper.rect(200,100,30,50).attr({fill:"#FFF"}), cc = paper.circle(240,150,10).attr({fill:"#FFF"}), tt = paper.text(200, 140, "Hello"); var pp = paper.set(rr, cc, tt); var p = paper.set(r, c, t); r.set = p, c.set = p, t.set = p; rr.set = pp, cc.set = pp, tt.set = pp; p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false, pp.newTX=0,pp.newTY=0,pp.fDx=0,pp.fDy=0,pp.tAddX,pp.tAddY,pp.reInitialize=false, start = function () { }, move = function (dx, dy) { var a = this.set; a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy; if(a.reInitialize) { a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false; } else { a.newTX+=a.tAddX,a.newTY+=a.tAddY; a.attr({transform: "t"+a.newTX+","+a.newTY}); } }, up = function () { this.set.reInitialize=true; }; p.drag(move, start, up); pp.drag(move, start, up); 

Answer 4

I had problems with dragging and dropping sets.

He does: - expands Raphael to make it possible to drag and drop - creates new sets with the mouse - holds the dragged set within the canvas.

Shortly speaking:

 CANVAS_WIDTH = 250; CANVAS_HEIGHT = 250; var newSet = document.getElementById("newSet"); paper = Raphael('canvas', CANVAS_WIDTH, CANVAS_HEIGHT); var backGround = paper.rect(0,0,CANVAS_HEIGHT, CANVAS_WIDTH); backGround.attr({fill: "lightgrey", "fill-opacity": 0.5, "stroke-width": 0}); newSet.onclick = function() { createNewSet(); } createNewSet = function() { var mySet = paper.set(); var rect = paper.rect(0, 0, 50, 50); rect.attr({fill: "red", "fill-opacity": 0.5, "stroke-width": 0}); var bBox = rect.getBBox(); var text = paper.text(10, 10, "Hello"); text.attr({fill: 'black', 'text-anchor': 'start'}); mySet.push(rect, text); mySet.draggable(); //mySet = reposText(mySet); mySet.max_x = CANVAS_WIDTH - bBox.width; mySet.min_x = 0; mySet.max_y = CANVAS_HEIGHT - bBox.height; mySet.min_y = 0; }; Raphael.st.draggable = function() { var me = this, lx = 0, ly = 0, ox = 0, oy = 0, moveFnc = function(dx, dy) { lx = dx + ox; ly = dy + oy; if (lx < me.min_x ) { lx = me.min_x; } else if ( lx > me.max_x) { lx = me.max_x; } if ( ly < me.min_y ) { ly = me.min_y; } else if ( ly > me.max_y) { ly = me.max_y; } me.transform('t' + lx + ',' + ly); }, startFnc = function() {}, endFnc = function() { ox = lx; oy = ly; }; this.drag(moveFnc, startFnc, endFnc); }; 

See this code in action: http://jsfiddle.net/Alexis2000/mG2EL/ Good luck!