Snap.svg - 拖动事件处理程序 [英] Snap.svg - drag event handler

问题描述

问题是关于新发布的 Element.drag 的onstart事件处理程序href =http://snapsvg.io/ =noreferrer> Snap.svg 。

Question is about the onstart event handler for Element.drag in the newly announced Snap.svg.

以下代码的用意是注册用于在svg对象上开始和停止拖动（onstart / onstop）的事件处理程序。

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.

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

控制台消息在拖动开始和停止时工作正常，但是null会覆盖默认的onmove函数 - 结果没有发生实际的阻力。如何传递我不想弄乱默认情况的内容？

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"?

（注意：我更喜欢通过赋值来注册事件处理程序，比如熟悉的onClick，但这是另一回事。）

(Note: I'd prefer to register an event handler by means of assignment, like the familiar onClick, but that's a different matter.)

注意几小时后添加：
Raphael.js文档和示例提供了一些线索。至少现在我知道如何为onmove传递一个提供默认移动行为的正确函数：

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:

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

推荐答案

我不确定我是否误解了什么你真的想......你不想实施拖拽吗？

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

这里的JSBin http://jsbin.com/akoCAkA/1/edit?html,js,output

这篇关于Snap.svg - 拖动事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！