Hi,
But with what code are you having trouble? Regards, Chris From: [email protected] [mailto:[email protected]] On Behalf Of Mr Rauf Sent: Donnerstag, 25. November 2010 07:13 To: [email protected] Subject: [svg-developers] Drag more then ONE objects together or groups I am working on a SVG web application & having a tough time figuring this one out. The functionality I want to achieve allows the user to draw (with the mouse) a rectangle around objects already placed on the screen. When two or more objects are under this drawn rectangle, they get grouped together, and then upon mousedown (event) inside the drawn rectangle, the user can drag the selected objects in unison. I have been able to statically grouped elements together but am struggling with the dynamic aspect, i.e. when the user selects the object, only then should they be grouped together & once the the user clicks outside the drawn box, the grouping ends & each objects again becomes independent. here is some code..... var far=document.getElementById("oo") far.addEventListener("load", function (){ var svgDoc=far.contentDocument; var svgRoot=svgDoc.documentElement; document.getElementById("bar").onclick=function(){ var g = svgDoc.createElementNS("http://www.w3.org/2000/svg";, "g"); g.setAttribute('id', 'group'); g.setAttribute('shape-rendering', 'inherit'); g.setAttribute('pointer-events', 'all'); var use = svgDoc.createElementNS("http://www.w3.org/2000/svg";, "use") use.setAttributeNS("http://www.w3.org/1999/xlink";, "xlink:href", "#group") use.setAttribute("id", "u") svgRoot.appendChild(use) var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg";, "rect") create_bar.setAttribute("id", "r_bar") create_bar.setAttribute("fill", "cream") create_bar.setAttribute("x", "300px") create_bar.setAttribute("y", "50px") create_bar.setAttribute("width", "100px") create_bar.setAttribute("height", "30px") create_bar.setAttribute("pointer-events", "inherit") g.appendChild(create_bar) var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg";, "circle"); cir.setAttribute( "id","cir") cir.setAttribute( "cx","320px") cir.setAttribute( "cy","65px") cir.setAttribute( "r","10px") cir.setAttribute('fill', 'red') cir.setAttribute('pointer-events', 'inherit') g.appendChild(cir) svgRoot.appendChild(g) } var btn_id=document.getElementById('bar2') btn_id.onclick=function() { var a=svgDoc.getElementById('r_bar') var b=svgDoc.getElementById('group') var c=svgDoc.getElementById('cir') var d=svgDoc.getElementById('u') alert(a.id+".."+b.id+".."+c.id+".."+d.id) } },false) [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
