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和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，「單」）移動單個物體或startMove（ evt，'group'）移動它所屬的組。