在 snap.svg 中手动触发拖动事件答案

【问题标题】：Manually trigger a drag event in snap.svg在 snap.svg 中手动触发拖动事件
【发布时间】：2016-05-31 20:16:01
【问题描述】：

如何在 Snap.svg 中手动触发拖动事件？

我有一个附加到元素的拖动事件：Element.drag(dragMove, dragStart, dragEnd)，并希望以编程方式触发此事件。

我曾尝试触发调用Element.events[i].f()的事件，其中i代表拖动事件，但似乎不起作用。

【问题讨论】：

只是想了解您要做什么...是否无法定义自己的捕捉拖动处理程序（移动、开始、结束功能），您可以根据需要调用它?还是必须使用 .drag() ？
我已经定义了函数，但是如果能够简单地触发事件而无需手动调用它们会很好。似乎它适用于 Raphael stackoverflow.com/questions/12059592/…。
对于drag()，我希望它将三个单独的对象放入events 数组中，分别用于dragMove、dragStart 和dragEnd - 你触发的是哪个？如果不是这样，我的猜测是命名空间自 Raphael 以来发生了变化（或者事件可能绑定到 SVG 而不是 JS 对象）。 Element.events 是否存在，它是否是一个数组，数组中的每个项目是否都是一个对象，每个对象是否有一个键 f() 这是一个函数？如果是这样，该函数是否需要任何参数？
events数组存在，并且有一个函数f = function start(e, x, y)，用于拖动事件。我收到一个错误“无法读取未定义的属性'originalEvent'”，查看源代码似乎源自：function start(e, x, y) { (e.originalEvent || e).preventDefault(); ....
你有没有找到办法做到这一点？我正在寻找一种方法来做同样的事情。

标签： snap.svg

【解决方案1】：

我想不出在 Snap 中有任何方法可以做到这一点。我想知道您是否可以伪造一个事件并将其发送给您想要的东西（也许 jquery 在这里会很有用）。

我仍然不确定这是否比仅调用函数有任何优势，因为我认为模拟拖动可能非常繁琐，所以我可能错过了你需要的重点，但它可能会给出一些想法！

jsfiddle

s = Snap(400, 620);

var r = s.rect(10,10,100,100);

r.click( function() { console.log('click') } );

r.drag( 
    function(x,y) { 
        console.log('move',x,y);
        this.transform('t' + x + "," + y );
    },

    function(x,y) { 
        console.log('start',x,y); 
    },

    function() { 
        console.log('end');
    }
  );


var e = new Event("mousedown" );
e.clientX = 34;
e.clientY = 35;
r.node.dispatchEvent( e ); //not sure if dispatch works on all browsers

var m = new Event("mousemove");
m.clientX = 40;
m.clientY = 40;
document.dispatchEvent( m );

var u = new Event("mouseup");
document.dispatchEvent( u );

【讨论】：

【解决方案2】：

刚刚想通了，

如果你为你的元素定义了dragStart、dragMove 和dragEnd，你可以这样做。在我的例子中， .tool 是 SVG 区域之外的一个 div。然后，当我将鼠标移到 svg 区域上时，元素会跟随鼠标移动。

$(".tool").mousedown(function(event) {

Element.events[0].f(event, event.clientX, event.clientY);

});

当然，您需要额外的代码才能使其出现在您的应用程序的正确位置等。但这是手动触发拖动事件的方法。 :)

【讨论】：