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

Question

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

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

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

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

Answer 2

才想通这个

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

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

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

});

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