手动触发snap.svg中的拖动事件

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

我试图触发调用Element.events [i] .f（）的事件，其中我代表拖动事件，但它似乎不工作。

2014-04-01 graphmeter

试图了解你正在尝试做什么...是不是可以定义你自己的捕捉拖动处理程序（移动，开始，结束funcs），你可以随意调用，只要你需要？或者你必须使用.drag（）？ – Ian

我已经定义了这些函数，但是如果能够在不手动调用这些函数的情况下简单地触发事件就会很好。似乎它在拉斐尔工作http://stackoverflow.com/questions/12059592/triggering-raphael-events-externally。 – graphmeter

使用'drag（）'我期望它将三个单独的对象放在'events'数组中，对于dragMove，dragStart和dragEnd--你触发了哪些对象？如果不是这样，我的猜测是，自从Raphael（或者事件绑定到SVG而不是JS对象）之后，命名空间发生了变化。 Element.events是否存在？它是一个数组吗？数组中的每一项都是一个对象吗？每个对象都有一个键f（）是一个函数吗？如果是这样，那么函数是否会期望任何争论？ – user568458

我想不出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);

来源

2014-04-02 12:11:19 Ian

就想通了这一点，

如果您定义的dragstart，dragMove和dragEnd你的元素，你可以不喜欢这样。在我的情况下，.tool是SVG区域外的一个div。当我将鼠标移动到svg区域时，元素会沿着鼠标左右移动。

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

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

});

Ofcourse，你将需要额外的代码，使其出现在你的应用程序正确的位置等。但是，这是如何手动触发拖动事件。 :)

来源

2016-05-31 12:09:16 tobros91

手动触发snap.svg中的拖动事件

回答

相关问题