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