如何在snap.svg中实现移动设备的拖放

Question

如何在Snap.svg中实现移动设备的拖放？触摸拖放似乎没有内置在Snap.svg的拖放功能中。

Answer 1

下面是对鼠标或触摸处理程序进行拖放的尝试。

它快速检查第一个参数，看看它是一个数字(鼠标拖动)还是一个对象(因此是一个触摸事件)。

然后，它接受changedTouches列表的第一个元素。我认为这应该就足够了，但是如果有必要的话，也许有人会想要循环遍历这个触点列表。

圆圈应该与鼠标或触摸一起工作，只有触摸才能工作。

var s = Snap(400,400); 

var rect = s.rect(20,20,40,40);
var circle = s.circle(60,150,50);

var move = function(dx,dy,x,y) {
    var clientX, clientY;
    if( (typeof dx == 'object') && ( dx.type == 'touchmove') ) {
        clientX = dx.changedTouches[0].clientX;
        clientY = dx.changedTouches[0].clientY;
        dx = clientX - this.data('ox');
        dy = clientY - this.data('oy');
    }
    this.attr({
                transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
            });
} 

var start = function( x, y, ev) {
    if( (typeof x == 'object') && ( x.type == 'touchstart') ) {
        x.preventDefault();
        this.data('ox', x.changedTouches[0].clientX );
        this.data('oy', x.changedTouches[0].clientY );  
    }
    this.data('origTransform', this.transform().local );
}

var stop = function() {
}

rect.touchstart( start );
rect.touchmove( move );
rect.touchend( stop );

circle.drag(move, start, stop )

小提琴