手動觸發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中的拖動事件

回答

相關問題