CODEWITHSUNDEEP
javascriptsvgsnap.svg
esafwan
esafwan

Reputation: 18029

Only able to drag circle in svg using snap.svg

I am trying to use snap.svg. I have created a circle, a rectangle and an image. I am able to drag the circle but not anything else. I have not clue what is wrong. Have been trouble shooting for last 1 hour. 

var s = Snap(400,400);
var img_src = "http://static.jsbin.com/images/dave.min.svg";
var rectangle = s.rect(160, 190, 150,150);
var bigCircle = s.circle(100, 100, 100);
var image = s.image(img_src, 10, 10, 80, 80);

var moveFunc = function (dx, dy, posx, posy) {      
  this.attr( { cx: posx , cy: posy } );
};

bigCircle.drag( moveFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

rectangle.drag( moveFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

The working code I used: http://jsbin.com/vanequ/edit?html,js,output

Update: Its seems to work when I don't pass the move function to rectangle and image. It however works when the function is in circle. I don't have any clue why. As I don't understand snap.svg fully yet, it may have to do with my ignorance.

This works:

rectangle.drag();
image.drag();

Upvotes: 0

Views: 86

Answers (1)

Bobby Orndorff
Bobby Orndorff

Reputation: 3335

Your moveFunc is setting cx/cy attributes. Circle elements are positioned using cx/cy attributes but rect and image elements are positioned using x/y attributes. Thus, the moveFunc will only work for the circle element. One possible solution is to have two move functions: one function for circle that sets cx/cy and one function for rect/image that sets x/y. For example...

var s = Snap(400,400);
var img_src = "http://static.jsbin.com/images/dave.min.svg";
var rectangle = s.rect(160, 190, 150,150);
var bigCircle = s.circle(100, 100, 100);
var image = s.image(img_src, 10, 10, 80, 80);

var moveCircleFunc = function (dx, dy, posx, posy) {      
  this.attr( { cx: posx , cy: posy } );
};
var moveRectFunc = function (dx, dy, posx, posy) {      
  this.attr( { x: posx , y: posy } );
};

bigCircle.drag( moveCircleFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

rectangle.drag( moveRectFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );
image.drag( moveRectFunc,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
 );

Upvotes: 1

Related Questions