Question

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

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

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

Answer 1

我无法在Snap中想到任何方式来做到这一点。我想知道你是否可能伪造一个事件并将它发送到你想要的东西（也许jquery在这里很有用）。

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

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

Answer 2

刚想出来，

如果你已经为你的元素定义了dragStart，dragMove和dragEnd，你就可以这样做。在我的情况下.tool是SVG区域之外的div。当我然后将鼠标移动到svg区域时，该元素跟随鼠标。

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

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

});

当然，您需要额外的代码才能使其显示在适合您的应用程序的正确位置等。但这是如何手动触发拖动事件。：）

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

2 个答案: