拖动一个圆圈答案

【问题标题】：Dragging a circle拖动一个圆圈
【发布时间】：2014-05-18 01:21:23
【问题描述】：

我开始使用 snap.svg，并且遇到了一个可能很简单的问题。我画了一个圆圈，想让用户拖动它，当用户停止拖动时，我想知道圆圈的最终位置。

我是从这个开始的：

var s = Snap("#svg");
var d = s.circle(20,20,5);

然后我创建了以下函数作为拖动事件处理程序；我只需要拖动结束事件，所以我将另外两个事件处理程序设为空：

var endFnc = function(e) { 
    alert("end: "+e.layerX+","+e.layerY); 
}

var startFnc = null;

var moveFnc = null;

然后我安装了拖动事件处理程序：

d.drag(moveFnc,startFnc,endFnc);

每当我试图拖动一个圆圈时，都会触发结束事件，但是圆圈并没有移动。

所以我想也许我还必须创建拖动移动事件（虽然我不需要它）：

var moveFnc = function(dx, dy, x, y) {
  this.transform('t' + x + ',' + y);
}

现在圆圈确实移动了，但不是完全在鼠标处，而是在它的右下角大约 20 像素。

我在这里阅读了文档：http://snapsvg.io/docs，似乎没有关于如何创建有效拖动事件的解释。

任何人是如何获得这些知识的？！

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

在使用 snap.js 苦苦挣扎了几个小时后，我终于发现了 svg.js 及其可拖动的插件，使用它要容易得多：

var draw = SVG('svg');
var circle = draw.circle(10).attr({cx:30,cy:30,fill:'#f06'});
circle.dragend = function(delta, event) {
    alert(this.attr('cx'))
}
circle.draggable();

所以，我切换到 svg.js ...

【讨论】：