10

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.

Alex
  • 3,167
  • 6
  • 35
  • 50
  • 1
    The link containing your file is gone. Please upload anew? It's archived here: https://web.archive.org/web/20120221161712/http://www.atarado.com:80/stackOF/drag-with%20problems.svg – O0123 Jun 14 '18 at 03:18

1 Answers1

20

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.

Peter Collingridge
  • 10,849
  • 3
  • 44
  • 61
  • Thank you very much. It is exactly what I need with simplicity under the hood. The only drawback what I can see for now is absence of Firefox support (again). It works excellent under the Chromium, and on Midori and Chrome not works on localhost !!?? There's some "black magic" wich I have to explore (Linux Mint OS). Anyway Peter, thank you for your immediate response, and nice tutorials on your web pages. – Alex Oct 15 '11 at 17:53
  • @PeterCollingridge The dropbox link containing your file is gone. Please upload anew? It's archived here: https://web.archive.org/web/20111219015048/https://dl.dropbox.com/u/169269/group_drag.svg – O0123 Jun 14 '18 at 03:11
  • The linked codepen seems broken, `Uncaught ReferenceError: evt is not defined at HTMLHtmlElement.onmousemove` – blackgreen Mar 21 '22 at 08:32