javascript - 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') 移动它所属的组。