SVG dragging for group

Question

I am trying to achieve group and individual dragging inside the group. In the group there are 3 circles. Blue and grey circles has to drag individually (by onmousedown), and orange one is for group moving (by onclick). The problem is that after dragging whole group, but you have to try at http://www.atarado.com/stackOF/drag-with%20problems.svg and see code.

Any help would be appreciate. Thanks.

Answer 1

I think I've fixed your problem: https://codepen.io/petercollingridge/full/djBjKm/

The issue was that the single dragging was altering the circle's cx and cy attributes, but the group drag was effecting the transformation of the whole group. I've simplified things so it all works using transformations and you only need a single set of functions for both:

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)
}

Now you call startMove(evt, 'single') to move an single object, or startMove(evt, 'group') to move the group it belongs to.