SVG.Js事件示例，簡單綁定拖動操作

一、代碼：

var draw = SVG('container').size(300, 300);
draw.style({
    border: '1px solid red'
});

var group = draw.group();
var rect = draw.rect(100, 60).fill('green');
rect.radius(50);
group.add(rect);
var text = draw.text('測試按鈕');
text.style({
    fill: 'red',
});
text.path('M0,10 100,10').attr({
    fill: 'none'
});
text.textPath().attr({
    startOffset: '50%',
    'text-anchor': 'middle',
    'dominant-baseline': 'middle'
});
group.add(text);

group.move(150, 100);
group.on('mouseenter', function () {
    rect.fill('blue');
}).on('mouseleave', function () {
    rect.fill('green');
});

//滑鼠拖動處理
var isMove = false;
var spanX = 0;
var spanY = 0;
group.on('mousedown', function (e) {
    isMove = true;
    spanX = e.pageX - group.x();
    spanY = e.pageY - group.y();
    console.info(spanX);
}).on('mouseup', function (e) {
    isMove = false;
}).on('mousemove', function (e) {
    if (isMove) {
        //移動等距離的group
        var tempX = e.pageX - spanX;
        var tempY = e.pageY - spanY;
        group.move(tempX, tempY);
    }
});      

也可以追加觸屏拖動代碼：

//綁定觸屏操作
group.on('touchstart', function (e) {
    console.info(e);
    isMove = true;
    spanX = e.touches[0].pageX - group.x();
    spanY = e.touches[0].pageY - group.y();
    console.info(spanX);
}).on('touchend', function (e) {
    isMove = false;
}).on('touchmove', function (e) {
    if (isMove) {
        //移動等距離的group
        var tempX = e.touches[0].pageX - spanX;
        var tempY = e.touches[0].pageY - spanY;
        group.move(tempX, tempY);
    }
});      

結果：