Перетаскивание SVG для группы

Question

Я пытаюсь добиться группового и индивидуального перетаскивания внутри группы. В группе 3 круга. Синие и серые круги нужно перетаскивать индивидуально (по принципу onmousedown), а оранжевый - для группового перемещения (по нажатию). Проблема в том, что после перетаскивания всей группы, но вы должны попробовать на 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') для перемещения группы, к которой он принадлежит.