Hi,
I have made up a simple example of what I mean. <?xml version="1.0" standalone="no"?> <svg width="100%" height="100%" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"; xmlns:ev="http://www.w3.org/2001/xml-events"; xmlns:xlink="http://www.w3.org/1999/xlink"; onload="ecmascript:_onload(evt)" onmousedown="ecmascript:MouseDown(evt)" onmousemove="ecmascript:MouseMove(evt)" onmouseup="ecmascript:MouseUp(evt)"> <script type="text/ecmascript"> <![CDATA[ var svgDoc=document; var svgRoot=svgDoc.documentElement; var ObjArray = new Array(); var GroupArray = new Array(); var SelectRect = null; var OrigX = 0; var OrigY = 0; var bInDrawRect = false; var bMoveObjects = false; var MyGroupObjectsObj = null; function _onload(evt) { MyGroupObjectsObj = svgDoc.getElementById("SelectGroup"); 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", "300"); create_bar.setAttribute("y", "50"); create_bar.setAttribute("width", "100"); create_bar.setAttribute("height", "30"); create_bar.setAttribute("pointer-events", "inherit"); svgRoot.insertBefore(create_bar, MyGroupObjectsObj); ObjArray[ObjArray.length] = create_bar; var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg";, "circle"); cir.setAttribute( "id","cir"); cir.setAttribute( "cx","320"); cir.setAttribute( "cy","65"); cir.setAttribute( "r","10"); cir.setAttribute('fill', 'red'); cir.setAttribute('pointer-events', 'inherit'); svgRoot.insertBefore(cir, MyGroupObjectsObj); ObjArray[ObjArray.length] = cir; } function Obj_Clicked(objid) { } function MouseDown(evt) { if(!bInDrawRect && SelectRect == null) { OrigX = evt.clientX; OrigY = evt.clientY; SelectRect=svgDoc.createElementNS("http://www.w3.org/2000/svg";, "rect"); SelectRect.setAttribute("id", "SelectRect"); SelectRect.setAttribute("fill", "white"); SelectRect.setAttribute("stroke", "black"); SelectRect.setAttribute("x", evt.clientX); SelectRect.setAttribute("y", evt.clientY); SelectRect.setAttribute("width", "1"); SelectRect.setAttribute("height", "1"); SelectRect.setAttribute("pointer-events", "inherit"); svgRoot.insertBefore(SelectRect,svgDoc.getElementById("Main_BKG").nextSiblin g); bInDrawRect = true; } else if(SelectRect != null) { var selbbox = SelectRect.getBBox(); if((evt.clientX > selbbox.x) && (evt.clientX < (selbbox.x+selbbox.width)) && (evt.clientY > selbbox.y) && (evt.clientY < (selbbox.y+selbbox.height))) { //in SelectRect bMoveObjects = true; OrigX = evt.clientX; OrigY = evt.clientY; }//if else { //ouside of SelectRect, so now we //remove all items and put them back and our rect for(var pos = 0; pos < GroupArray.length;pos++) { var obj = GroupArray[pos]; ObjArray[ObjArray.length] = obj; GroupArray.splice(pos,1); pos--; MyGroupObjectsObj.removeChild(obj); svgRoot.insertBefore(obj, MyGroupObjectsObj); //testing obj.setAttribute("stroke","none"); }//for svgRoot.removeChild(SelectRect); SelectRect = null; }//else } } function MouseMove(evt) { if(bInDrawRect) { var dx = Math.abs(evt.clientX - OrigX); var dy = Math.abs(evt.clientY - OrigY); SelectRect.setAttribute("width", dx); SelectRect.setAttribute("height", dy); } else if(bMoveObjects) { var dx = evt.clientX - OrigX; var dy = evt.clientY - OrigY; OrigX = evt.clientX; OrigY = evt.clientY; for(var pos = 0; pos < GroupArray.length;pos++) { var obj = GroupArray[pos]; switch(obj.tagName) { case "rect": var xpos = Number(obj.getAttribute("x")); var ypos = Number(obj.getAttribute("y")); xpos += dx; ypos += dy; obj.setAttribute("x", xpos); obj.setAttribute("y", ypos); break; case "circle": var xpos = Number(obj.getAttribute("cx")); var ypos = Number(obj.getAttribute("cy")); xpos += dx; ypos += dy; obj.setAttribute("cx", xpos); obj.setAttribute("cy", ypos); break; }//switch } var xpos = Number(SelectRect.getAttribute("x")); var ypos = Number(SelectRect.getAttribute("y")); xpos += dx; ypos += dy; SelectRect.setAttribute("x", xpos); SelectRect.setAttribute("y", ypos); } } function MouseUp(evt) { if(bInDrawRect) { bInDrawRect = false; var selbbox = SelectRect.getBBox(); for(var pos = 0; pos < ObjArray.length;pos++) { var objbbox = ObjArray[pos].getBBox(); if((objbbox.x > selbbox.x) && ((objbbox.x+objbbox.width) < (selbbox.x+selbbox.width)) && (objbbox.y > selbbox.y) && ((objbbox.y+objbbox.height) < (selbbox.y+selbbox.height))) { var obj = ObjArray[pos]; GroupArray[GroupArray.length] = obj; ObjArray.splice(pos,1); pos--; svgRoot.removeChild(obj); MyGroupObjectsObj.appendChild(obj); //testing obj.setAttribute("stroke","black"); } } } bMoveObjects = false; } ]]> </script> <rect id="Main_BKG" x="0" y="0" width="100%" height="100%" stroke="none" fill="rgb(255,255,255)" /> <g id="SelectGroup" ></g> </svg> From: [email protected] [mailto:[email protected]] On Behalf Of Chris Peto Sent: Donnerstag, 25. November 2010 08:57 To: [email protected] Subject: RE: [svg-developers] Drag more then ONE objects together or groups correction In the first place your "oo" is already loaded, so it won't fire "load". From: [email protected] <mailto:svg-developers%40yahoogroups.com> [mailto:[email protected] <mailto:svg-developers%40yahoogroups.com> ] On Behalf Of Chris Peto Sent: Donnerstag, 25. November 2010 08:51 To: [email protected] <mailto:svg-developers%40yahoogroups.com> Subject: RE: [svg-developers] Drag more then ONE objects together or groups Hi, In the first place your "bar" is already loaded, so it won't fire "load". This is the way I do it: You have an svg with objects: - You make mousedown/mousemove/mouseup global handlers (usually it is best to make a rectangle in the background of the whole screen so that these will fire) - on mousedown you start a rect, insert in rootSVG, and on mousemove you size it (make sure the rect is behind all objects for later click removal) - then on mouseup you stop drawing and go through either (a javascript array of objects that you have created or go through the DOM) - if the tagName is what you want, i.e. rect, circle, then getBBox and see if it fits in your rect that you just drawn - if it fits then remove the object from its parentNode in the DOM and append it in your group (g) To dynamically remove objects: - if you already have drawn your rect, then on mousedown and the object is in the group - then remove it from the group in the DOM and insert in back into svgRoot To completely remove all object ( click outside your drawn rect): - if mousedown outside your rect - then remove all objects in your group and append then to svgRoot - then remove your drawn rect from DOM Hope this helps, Chris From: [email protected] <mailto:svg-developers%40yahoogroups.com> <mailto:svg-developers%40yahoogroups.com> [mailto:[email protected] <mailto:svg-developers%40yahoogroups.com> <mailto:svg-developers%40yahoogroups.com> ] On Behalf Of Mr Rauf Sent: Donnerstag, 25. November 2010 07:13 To: [email protected] <mailto:svg-developers%40yahoogroups.com> <mailto:svg-developers%40yahoogroups.com> 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/
