Re: SVG Element Drag/Drop Issue on Zoomed in SVG

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/