Question

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

Answer 1

尝试执行适用于鼠标或触摸处理程序的拖放操作。

它会快速检查第一个参数，看它是一个数字（鼠标拖动）还是一个对象（所以是一个touchevent）。

然后它接受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 )

jsfiddle

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

1 个答案: