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

Question

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

Answer 1

这里尝试进行拖放操作，适用于鼠标或触摸处理程序。

它会快速检查第一个参数，看它是数字（如鼠标拖动）还是对象（如触摸事件）。

然后它获取 changedTouches 列表的第一个元素。我认为这应该就足够了，但如果有必要，也许有人会想要遍历 touches 列表。

圆圈应该可以用鼠标或触摸，矩形只能用触摸。

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 )

jsfiddle