如何在移动设备的 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 )

jsfiddle