그룹 용 SVG 끌기

Question

그룹 내에서 그룹 및 개별 끌어 오기를 수행하려고합니다. 그룹에는 3 개의 원이 있습니다. 파란색과 회색 원은 개별적으로 (onmousedown에 의해) 드래그해야하고, 주황색 원은 그룹 이동 (onclick에 의해) 용입니다. 문제는 전체 그룹을 드래그 한 후 http://www.atarado.com/stackOF/drag-with%20problems.svg에서 시도하고 코드를 확인해야한다는 것입니다.

도움을 주시면 감사하겠습니다. 감사.

Answer 1

은 내가 당신의 문제를 해결했다고 생각 : http://dl.dropbox.com/u/169269/group_drag.svg

문제는 하나의 드래그가 원의 CX를 변경하고 싸이 속성,하지만 그룹 드래그 그룹 전체의 변화를 초래 한 것이 었습니다. 나는 변환을 사용하는 일이 그래서 모든 일을 단순화했습니다 당신은 단지 하나의 모두를위한 기능의 설정이 필요합니다 (

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, '단일')를 하나의 객체를 이동하거나 startMove을 evt, 'group')에 속한 그룹을 이동합니다.