CODEWITHSUNDEEP
javascriptsvgsnap.svg
aivaldi
aivaldi

Reputation: 67

Snap.svg draggin Path Element

I'm trying to drag a Path element with Snap.SVG, I'm using drag method

when method is called without parmeteres it seems to work ok, but when I add the listeners I cant make it work, It's looks like is not posible to change to position x,y attributes

start = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);


moveFunc =  (dx, dy, posx, posy) ->
    this.attr( { cx: posx , cy: posy } )


stop = () ->
    console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);

p.drag( moveFunc, start, stop)

The previos code doesnt work with path element, but it does with circle.

Next code can move it but when drag it again loose the last position

moveFunc =  (dx, dy, posx, posy) ->
        this.transform( "translate("+dx+", "+dy+")")

So guessing, last method do the trick for translate it, but it doesnt really change the position.

Upvotes: 0

Views: 50

Answers (1)

Ian
Ian

Reputation: 13842

To move a path, you will need to transform it, try this format.

this.transform('t' + dx + ',' + dy );

However, as mentioned it won't keep the last position. For that you need to store the transform on the mouse down....

var move = function(dx,dy) {
        this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
                });
}

var start = function() {
        this.data('origTransform', this.transform().local );
}

example

Upvotes: 1

Related Questions