グループのSVGドラッグ

Question

私はグループ内でグループと個々のドラッグを達成しようとしています。グループには3つの円があります。青と灰色の円は個別に（オンモスで）ドラッグし、オレンジ色のグループはグループ移動（オンクリックで）する必要があります。 問題は、グループ全体をドラッグした後で、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'）、それが所属するグループを移動します。