snapsvg .drag()属性定义

Question

我只是从snap.svg开始。如果没有传递参数，element.drag()函数将提供一组默认值，否则您必须定义自己的onmove、onstart和onend函数。

可以在您的onmove实现中使用onmove(dx,dx,x,y,event)的参数来移动元素。

如果我创建了一组元素，默认的g.drag()允许该组移动，但我不知道在我自己的onmove中放入什么才能使该组移动。

this.attr({cx: posx , cy: posy});在.circle上工作。.group对应的x和y是什么？

Answer 1

下面是我刚刚测试的一个例子：

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);
}

希望这能有所帮助。

Answer 2

dragging = function(dx, dy, posX, poxY, event){
    this.transform("translate("+posX+","+posY+")");
}