javascript Snap.svg - 拖动事件处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19559349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Snap.svg - drag event handler
提问by user1685529
Question is about the onstart event handler for Element.dragin the newly announced Snap.svg.
问题是关于新发布的Snap.svg 中Element.drag的 onstart 事件处理程序。
The intention of the code below is to register event handlers for the start and stop of a drag (onstart/onstop) on an svg object.
下面代码的目的是为 svg 对象上的拖动 (onstart/onstop) 的开始和停止注册事件处理程序。
var s = Snap(800,600);
var bigCircle = s.circle(300,150,100);
bigCircle.drag(null,
function(){
console.log("Move started");
},
function(){
console.log("Move stopped");
}
);
The console messages work fine on drag start and stop, but the null overrides the default onmove function - resulting in no actual drag happening. How do I pass something that says "I don't want to mess with the default onmove"?
控制台消息在拖动开始和停止时工作正常，但 null 覆盖了默认的 onmove 函数 - 导致没有实际拖动发生。如何传递“我不想弄乱默认的onmove”的内容？
(Note: I'd prefer to register an event handler by means of assignment, like the familiar onClick, but that's a different matter.)
（注意：我更喜欢通过赋值的方式注册一个事件处理程序，就像熟悉的 onClick，但那是另一回事。）
Note added after few hours: The Raphael.js documentation and examples provide some clues. At least now I know how to pass in a proper function for onmove that provides the default move behavior:
几个小时后添加的注释：Raphael.js 文档和示例提供了一些线索。至少现在我知道如何为提供默认移动行为的 onmove 传递适当的函数：
var s = Snap(800,600);
var bigCircle = s.circle(300,150,100);
start = function() {
this.ox = parseInt(this.attr("cx"));
this.oy = parseInt(this.attr("cy"));
console.log("Start move, ox=" + this.ox + ", oy=" + this.oy);
}
move = function(dx, dy) {
this.attr({"cx": this.ox + dx, "cy": this.oy + dy});
}
stop = function() {
this.ox = parseInt(this.attr("cx"));
this.oy = parseInt(this.attr("cy"));
console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);
}
bigCircle.drag(move, start, stop);
采纳答案by Ian
I'm not sure if I'm misunderstanding what you exactly want...don't you want to implement the drag ?
我不确定我是否误解了你到底想要什么......你不想实现拖动吗？
So for example...
所以例如...
var s = Snap(400,400);
var bigCircle = s.circle(150, 150, 100);
var moveFunc = function (dx, dy, posx, posy) {
this.attr( { cx: posx , cy: posy } ); // basic drag, you would want to adjust to take care of where you grab etc.
};
bigCircle.drag( moveFunc,
function(){
console.log("Move started");
},
function(){
console.log("Move stopped");
}
);
回答by dhqvinh
There is an example how to drag with SnapSVG here: http://svg.dabbles.info/snaptut-drag.html
这里有一个如何使用 SnapSVG 拖动的示例：http://svg.dabbles.info/snaptut-drag.html
var s = Snap("#svgout");
var rect = s.rect(20,20,40,40);
var circle = s.circle(60,150,50);
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 );
}
var stop = function() {
console.log('finished dragging');
}
rect.drag(move, start, stop );
circle.drag(move, start, stop );
回答by Erel Segal-Halevi
After struggling for some hours to do this with snap.js, I finally discovered svg.js and its draggable plugin, with which it is so much easier:
在用 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();
So, I switched to svg.js ...
所以，我切换到 svg.js ...
回答by MKarrow
The eve.on method wasn't working for me, so I did some poking around and managed to recreate the onmove function. The other two (onstart and onend) require no specific code to work apparently:
eve.on 方法对我不起作用，所以我做了一些探索并设法重新创建了 onmove 函数。另外两个（onstart 和 onend）显然不需要特定的代码即可工作：
var S = Snap(300,300);
var bigCircle = S.circle(150, 150, 100);
bigCircle.drag(onDragMove, onDragStart, onDragEnd);
var ddx = 0;
var ddy = 0;
var dxDone = 0;
var dyDone = 0;
function onDragMove (dx, dy, posx, posy) {
dx = dx + dxDone; // dx and dy reset to 0 for some reason when this function begins
dy = dy + dyDone; // retain the last move's position as the starting point
this.attr( { transform: 't'+dx+','+dy } );
ddx = dx;
ddy = dy;
console.log('moving...');
};
function onDragStart(x,y,e) {
console.log('start!');
};
function onDragEnd(e) {
dxDone = ddx;
dyDone = ddy;
console.log('end!');
};
Please note however that this should only be used for one dragged object at a time. If you need a custom drag for another object, you'll have to rename the functions (ie onDragStart2) and the four variables declared outside of them (ie ddx2) after duplicating it.
但是请注意，这一次只能用于一个拖动对象。如果您需要为另一个对象自定义拖动，则必须在复制后重命名函数（即 onDragStart2）和在它们之外声明的四个变量（即 ddx2）。
Also, the 'transform' string format I passed (tx,y) came from what I found after doing console.log( this.attr('transform') ). I'm not familiar with matrix() just yet, so this way seemed easier.
此外，我传递的“转换”字符串格式 (tx,y) 来自我在执行 console.log( this.attr('transform') ) 后发现的内容。我还不熟悉 matrix() ，所以这种方式似乎更容易。
Hope this helps!
希望这可以帮助！
回答by MKarrow
I can't drag group elements with custom handlers, s.drag() makes it possible. So i searched further found its possible.
我无法使用自定义处理程序拖动组元素， s.drag() 使其成为可能。所以我进一步搜索发现它是可能的。
Documentation:
文档：
Additionaly following drag events are triggered: drag.start. on start, drag.end. on > end and drag.move. on every move. When element is dragged over another element > drag.over. fires as well.
另外触发以下拖动事件：drag.start。在开始时，drag.end。>结束并拖动移动。一举一动。当元素被拖到另一个元素上时 > drag.over。火灾也是如此。
Solution:
解决方案：
s.drag();
eve.on("snap.drag.start." + s.id, function () {
console.log('cool');
});
eve.on("snap.drag.move." + s.id, function () {
console.log('cooler');
});
eve.on("snap.drag.end." + s.id, function () {
console.log('way cool');
});
eve is not documented on snapsvg it is available on raphael. i don't know this is proper way or hack.
夏娃没有记录在 snapsvg 上，它在 raphael 上可用。我不知道这是正确的方法还是黑客。
