Hi Vishal, This should work if you include event at each element you want to drag/drop. e.g.
<circle onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="stopDrag(evt)" .../> <rect onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="stopDrag(evt)" .../> <text onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="stopDrag(evt)" .../> ..etc Regards, Francis --- In [email protected], "vishal_aegisisc" <vishal_aegisisc@...> wrote: > > Francis, > > Thank you very much for your reply,but i want a solution that drags an svg > element instead of whole svg in applied zoom in effect for svg viewbox. > > Regards, > Vishal > > > --- In [email protected], "Francis Hemsher" <fhemsher@> wrote: > > > > Hi Vishal, > > > > I have used the following to track the cursor as related to inline SVG: > > > > //---x,y offset values for svgDiv (no page scrolling)--- > > function findPos(obj) > > { > > var curleft = curtop = 0; > > if (obj.offsetParent) > > { > > do { > > curleft += obj.offsetLeft; > > curtop += obj.offsetTop; > > } > > while (obj = obj.offsetParent); > > > > return [curleft,curtop]; > > } > > } > > > > var xSVG > > var ySVG > > function showXY(evt) > > { > > var posX=findPos(svgDiv)[0] > > var posY=findPos(svgDiv)[1] > > //---if page scrolling y,x ---- > > var offsetY=document.documentElement.scrollTop > > var offsetX=document.documentElement.scrollLeft > > xSVG=evt.clientX-posX+offsetX > > ySVG=evt.clientY-posY+offsetY > > > > } > > > > In order to drag from/across one viewPort and drop to another, where they > > each have different viewBox values, is tricky but doable. You'll would use > > the following SVG goodies: > > 1) nearestViewportElement() > > 2) getScreenCTM > > 3) SVGPoint > > 4) matrixTransform > > 5) inverse() > > 6) getCTM > > Plus store the translation x,y value at each DragTarget. > > > > Assume the DragTarget is the svg element that will be dragged from another > > SVG/HTML parent within the HTML document and dropped into the desired SVG, > > i.e, your map.svg (shown as mySVG below) > > > > > > var DragTarget=null; > > var Dragging = false; > > var OffsetX = 0; > > var OffsetY = 0; > > var Pnt; > > //---mouse down over svg element, determine Offset--- > > function startDrag(evt) > > { > > if(Dragging==false) > > { > > DragTarget=evt.target; > > //---reference point to its respective viewport-- > > Pnt = DragTarget.nearestViewportElement.createSVGPoint(); > > Pnt.x = evt.clientX; > > Pnt.y = evt.clientY; > > //---elements in different(svg) viewports--- > > var sCTM = DragTarget.nearestViewportElement.getScreenCTM(); > > Pnt = Pnt.matrixTransform(sCTM.inverse()); > > > > OffsetX = Pnt.x - parseFloat(DragTarget.getAttribute("transX")); > > OffsetY = Pnt.y - parseFloat(DragTarget.getAttribute("transY")); > > > > Dragging=true; > > } > > } > > > > > > //---onmousemove--- > > function drag(evt) > > { > > if(Dragging) > > { > > //---reference point to its respective viewport-- > > Pnt = DragTarget.nearestViewportElement.createSVGPoint(); > > Pnt.x = evt.clientX; > > Pnt.y = evt.clientY; > > //---elements in different(svg) viewports--- > > var sCTM = DragTarget.nearestViewportElement.getScreenCTM(); > > Pnt = Pnt.matrixTransform(sCTM.inverse()); > > Pnt.x -= OffsetX; > > Pnt.y -= OffsetY; > > //---retain values for next Offset--- > > DragTarget.setAttribute("transX", Pnt.x); > > DragTarget.setAttribute("transY", Pnt.y); > > DragTarget.setAttribute("transform", "translate(" + Pnt.x + "," > > + Pnt.y + ")"); > > } > > } > > > > //---mouseup: drop into new viewPort, and auto transform to its current > > viewBox--- > > function stopDrag(evt) > > { > > mySVG.appendChild(DragTarget); > > showXY(evt) > > Pnt = mySVG.createSVGPoint(); > > Pnt.x =xSVG > > Pnt.y =ySVG; > > //---elements in different(svg) viewports--- > > var sCTM = DragTarget.nearestViewportElement.getCTM(); > > Pnt = Pnt.matrixTransform(sCTM.inverse()); > > Pnt.x -= OffsetX; > > Pnt.y -= OffsetY; > > DragTarget.setAttribute("transform", "translate(" + Pnt.x + "," > > + Pnt.y + ")"); > > Dragging = false; > > DragTarget=null > > OffsetX=0 > > OffsetY=0 > > } > > > > I have used this in IE9, and it works nicely. I haven't tested it in other > > browsers. > > > > Regards, > > Francis > > > > > > --- In [email protected], "vishal_aegisisc" <vishal_aegisisc@> > > wrote: > > > > > > Dear Friends, > > > > > > i'm stuck with the below mentioned scenario, > > > > > > Following Implementations are done, > > > > > > 1) i'm loading svg in html division as shown below, > > > > > > $('#SvgDIV').svg({ loadURL: 'map.svg', onLoad: function () { > > > // here i'm binding some functionalities with jquery > > > } > > > }); > > > > > > here map.svg is representing a map > > > > > > 2) [Drag and Drop From HTML DIV To SVG] > > > > > > I have another html division i.e. <div id="pqr" class="drag"> <ul><li > > > class="abc" image="xyz.svg">XYZ</li></ul> </div> > > > > > > here xyz.svg represents an element,And i'm placing/appending this element > > > as an svg image tag on above map (i.e. mentioned in point-1), > > > To accomplish that I'm dragging this <li> to above loaded svg map in > > > "SvgDIV" division with the help of jQuery UI plugin. > > > > > > As a result,xyz.svg(element) that is binded with <li class="abc"> will be > > > appended as an svg image tag in map.svg (map) on the drop event of <li> > > > > > > > > > 3) [Drag and Drop From SVG To SVG] > > > > > > Drag & Drop of svg element(xyz.svg) in map.svg(map) with the help of > > > jQuery UI plugin only. > > > > > > > > > 4) SVG Zoom in out functionality without panning by playing with Viewbox > > > coordinates of root element of map SVG i.e. map.svg, > > > > > > Implemented Point 3 & 4 are Drag and Drop without zooming in/out the > > > map,that means map is in its original size and position > > > when we are making Drag/Drop From SVG To SVG and From HTML DIV to SVG, > > > the issue is with drag and drop of an element along with zoom in/out of > > > the map > > > > > > Issue 1 : Is it possible/feasible If I want to drag & drop > > > element(xyz.svg) on map(map.svg) at the time of ZOOM IN IS APPLIED ON THE > > > MAP? > > > and if it is correct approach/possible then how to get correct > > > position/actual coordinates of element > > > in map on drop event of that svg element? (Please suggest any possible > > > way to achieve this) > > > > > > Issue 2 : When i try to drag element from map and drop it to the map only > > > that time also getting problem to get actual position/coordinates of > > > element on map > > > > > > Please suggest the possible ways to get rid of it. > > > > > > Regards, > > > Vishal > > > > > > ------------------------------------ ----- 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/
