SVG拖动组

Question

我正在尝试在群组中实现群组和个人拖动。在该组中有3个圆圈。蓝色和灰色圆圈必须单独拖动（通过onmousedown），橙色圆圈用于组移动（通过onclick）。 问题是在拖动整个组后，您必须尝试http://www.atarado.com/stackOF/drag-with%20problems.svg并查看代码。

任何帮助都会受到赞赏。感谢。

Answer 1

我想我已经修复了你的问题：https://codepen.io/petercollingridge/full/djBjKm/

问题是单次拖动改变了圆圈的cx和cy属性，但是群体阻力正在影响整个群体的转变。我已经简化了一些事情，所以它都可以使用转换，你只需要一组函数：

function startMove(evt, moveType){
     x1 = evt.clientX;
     y1 = evt.clientY;
     document.documentElement.setAttribute("onmousemove","moveIt(evt)")

     if (moveType == 'single'){
        C = evt.target;
     }
     else {
        C = evt.target.parentNode;
     }
}

function moveIt(evt){
    translation = C.getAttributeNS(null, "transform").slice(10,-1).split(' ');
    sx = parseInt(translation[0]);
    sy = parseInt(translation[1]);

    C.setAttributeNS(null, "transform", "translate(" + (sx + evt.clientX - x1) + " " + (sy + evt.clientY - y1) + ")");
    x1 = evt.clientX;
    y1 = evt.clientY;
}

function endMove(){
    document.documentElement.setAttributeNS(null, "onmousemove",null)
}

现在你调用startMove（evt，'single'）来移动一个对象，或者调用startMove（evt，'group'）来移动它所属的组。