Loading ...
Sorry, an error occurred while loading the content.

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

Expand Messages
  • Francis Hemsher
    Hi Vishal, This should work if you include event at each element you want to drag/drop. e.g.
    Message 1 of 6 , Aug 10, 2012
    View Source
    • 0 Attachment
      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 svg-developers@yahoogroups.com, "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 svg-developers@yahoogroups.com, "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 svg-developers@yahoogroups.com, "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
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.