0

I'm just starting with snap.svg. The element.drag() function provides a set of defaults if no parameters are passed, otherwise you have to define your own onmove, onstart and onend functions.

The parameters for onmove(dx,dx,x,y,event) can be used in your implementation of onmove to move the element.

If I create a group of elements, the default g.drag() allows the group to move but I can't figure out what to put in my own onmove to make the group move.

this.attr({cx: posx , cy: posy}); works for a .circle. What are the equivalent x,y for a .group?

Appulus
  • 18,630
  • 11
  • 38
  • 46
TwoBears
  • 71
  • 2
  • 6

2 Answers2

0

Here is an example that I just tested:

var s = Snap("#svg");

Snap.load("draw.svg", function(f) {
g = f.select("g");
s.append(g);

g.cx = 40;
g.cy = 140;
g.ox = 0;
g.oy = 0;

g.drag(dragging, startDrag, function(evt) {
            console.log("dropped at: "+ evt.x + ", " + evt.y);
        });


});

startDrag = function(posx, posy) {
  this.ox = posx - this.cx;
  this.oy = posy - this.cy;
}

dragging = function(dx, dy, posx, posy) {
  this.cx = posx - this.ox;
  this.cy = posy - this.oy;
  t = 't' + this.cx + ',' + this.cy;
  this.transform(t);
}

Hope it will help.

Gois
  • 1
  • 1
  • Thanks, that's interesting, here you are creating the cx,cy,ox,oy var's on the g object. The example on snapsvp.io site seem to have the cx,cy already defined for circles, rects but not for groups? A movement can be achieved by just using this.attr(cx: 100, cy:100) on a circle. It seems that groups have to handled differently using the method you have outlined. – TwoBears Nov 17 '13 at 21:09
  • Groups should use transforms really for simplicity as in the example. Its fine to use cx/cy if just dragging a circle, but assuming you want to do more, I would get used to using transforms and groups. – Ian Jan 09 '14 at 09:36
0

You can use the transform method on group elements. 

dragging = function(dx, dy, posX, poxY, event){
    this.transform("translate("+posX+","+posY+")");
}
Khyam Shahzad
  • 139
  • 1
  • 5