Drag/dropping a group.

I am trying to drag and drop a group, by clicking on and moving the top bar (a rect). I am changing the x and y attributes of the rectangle, however since a group doesnt have an x and y attribute how could i get it so all the objects in the group move with the top bar? A simple example of how the group would look. By moving the top rect, i need all the objects in the group to move.

<g id="group" >
<rect x="150" y="85" width="50" height="30" style="fill: #00F"
onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
</rect>
<rect id="bar" x="150" y="85" width="50" height="10" style="fill: orange"
onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)"
onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)">
</rect>
</g>

Thanks for any help.

You can
- add transform attribute to your group
<g transform="translate(0 0)">
.......
</g>
- on click store values of translate ( using evt.target.parentNode.getAttribute("transform") by example or matrix - see example )
- on moving mouse, change attribute transform

Example of code for ASV3 and ASV6 beta

function ClickObj(evt)
{
clicked_group = true
node = evt.target.parentNode
if (ASV == 6)
var matrix = node.getTransformToElement(node.parentNode)
else
var matrix = node.getCTM()
xd1_group = parseFloat(matrix.e) - evt.clientX
yd1_group = parseFloat(matrix.f) - evt.clientY
}

function MoveObj(evt)
{
if (!clicked_group)
return
dep_x = xd1_group + evt.clientX
dep_y = yd1_group + evt.clientY
node = evt.target.parentNode
node.setAttribute("transform","translate(" + dep_x + " " + dep_y + ") ")
}

function OutOfObj(evt)
{
clicked_group = false
}

To test ASV version :

var version = window.getSVGViewerVersion()
if (version.indexOf("6.0") >= 0)
ASV = 6
else
ASV = 3

Michel

the <use>-tag would also be an alternative...<defs>
<g id="group">
...
</g>
</defs>
<use id="object_to_be_moved" xlink:href="#group" x="0" y="0" />