Kéo SVG cho nhóm

Question

Tôi đang cố gắng để đạt được nhóm và cá nhân kéo bên trong nhóm. Trong nhóm có 3 vòng tròn. Vòng tròn màu xanh lam và màu xám phải kéo riêng lẻ (bằng cách onmousedown) và hình tròn màu cam dành cho nhóm di chuyển (bằng onclick). Vấn đề là sau khi kéo toàn bộ nhóm, nhưng bạn phải thử tại http://www.atarado.com/stackOF/drag-with%20problems.svg và xem mã.

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn.

Answer 1

Tôi nghĩ rằng tôi đã cố định vấn đề của bạn: http://dl.dropbox.com/u/169269/group_drag.svg

Vấn đề là rằng kéo đơn được thay đổi cx của vòng tròn và cy thuộc tính, nhưng kéo nhóm đã thực hiện việc chuyển đổi toàn bộ nhóm. Tôi đã đơn giản hóa mọi thứ vì thế tất cả các công trình sử dụng biến đổi và bạn chỉ cần một bộ chức năng cho cả hai:

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

Bây giờ bạn gọi startMove (evt, 'đơn') để di chuyển một đối tượng duy nhất, hoặc startMove (evt, 'group') để di chuyển nhóm thuộc về nó.