Databases
StackOverflow2013
Postsdbo
POSnap To Grid Functionality Using Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSnap To Grid Functionality Using Javascript
    primarykey
    data
    text
    <p>everyone, i am working on SVG, Problem i am facing is that i want to implement the Snap To Grid functionality in my application, i have ,made the grid using line in SVG, i have also implemented the drag and drop functionality in it. now i want to implement the Snap to Grid functionality in it. Any help will be Awesome, Shall be very Thankfull, File name of SVG is (DndD.svg) save it with that name Regards: Zain</p> <p>Here is the code</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;JSP Page&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;object data="DndD.svg" id="oo" style="width: 800px" height="500px"&gt; &lt;/object&gt; &lt;span id="trail" style="visibility: hidden"&gt;&lt;/span&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; var far=document.getElementById("oo") far.addEventListener("load", function (){ var svgDoc=far.contentDocument; var svgRoot=svgDoc.documentElement; var r=svgDoc.getElementById("rectangle") r.onmousemove=function(evt){ var x=evt.pageX var y=evt.pageY document.getElementById('trail').style.visibility="visible"; document.getElementById('trail').style.position="absolute"; document.getElementById('trail').style.left=evt.clientX+10; document.getElementById('trail').style.top=evt.clientY; document.getElementById("trail").innerHTML=x+","+y } var line2; var count=0 var xx=0 var yy=0 line2="line_id"+count for(var i=0;i&lt;=48;i++){ xx=xx+10 var line=svgDoc.createElementNS("http://www.w3.org/2000/svg", "line") line.setAttribute("id", line2) line.setAttribute("x1", xx) line.setAttribute("y1", "0") line.setAttribute("x2", xx) line.setAttribute("y2", "400") line.setAttribute("stroke", "red") line.setAttribute("stroke-width", "1") line.setAttribute("pointer-events", "none") svgRoot.appendChild(line) } for(var i=0;i&lt;=39;i++){ yy=yy+10 var line=svgDoc.createElementNS("http://www.w3.org/2000/svg", "line") line.setAttribute("id", line2) line.setAttribute("x1", "0") line.setAttribute("y1", yy) line.setAttribute("x2", "500") line.setAttribute("y2", yy) line.setAttribute("stroke", "red") line.setAttribute("stroke-width", "1") line.setAttribute("pointer-events", "none") svgRoot.appendChild(line) } var rec = svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect"); rec.setAttribute("id", "btn_rect"); rec.setAttribute("fill","orange") rec.setAttribute("stroke","black") rec.setAttribute( "x","100px") rec.setAttribute( "y","100px") rec.setAttribute( "width","45px") rec.setAttribute( "height","45px") rec.setAttribute( "rx","3px") rec.setAttribute( "ry","3px") svgRoot.appendChild(rec); },false) &lt;/script&gt; &lt;/html&gt; SVG CODE other file &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)" onmousedown="Grab(evt)" onmousemove="Drag(evt)" onmouseup="Drop(evt)" &gt; &lt;rect x="0" y="0" width="500px" height="400px" fill="black" stroke="black" id="rectangle" pointer-events="none"/&gt; &lt;script&gt; &lt;![CDATA[ var SVGDocument = null; var SVGRoot = null; SVG_lay=new Array(); var TrueCoords = null; var GrabPoint = null; var BackDrop2 = null; var DragTarget = null; function Init(evt) { SVGDocument = evt.target.ownerDocument; SVGRoot = SVGDocument.documentElement; // these svg points hold x and y values... // very handy, but they do not display on the screen (just so you know) TrueCoords = SVGRoot.createSVGPoint(); GrabPoint = SVGRoot.createSVGPoint(); // this will serve as the canvas over which items are dragged. // having the drag events occur on the mousemove over a backdrop // (instead of the dragged element) prevents the dragged element // from being inadvertantly dropped when the mouse is moved rapidly BackDrop2 = SVGDocument.getElementById('BackDrop1'); } function Grab(evt) { // find out which element we moused down on var targetElement = evt.target; //SVG_lay.push(targetElement); // you cannot drag the background itself, so ignore any attempts to mouse down on it if ( BackDrop2 != targetElement ) { //set the item moused down on as the element to be dragged DragTarget = targetElement; // move this element to the "top" of the display, so it is (almost) // always over other elements (exception: in this case, elements that are // "in the folder" (children of the folder group) with only maintain // hierarchy within that group DragTarget.parentNode.appendChild( DragTarget ); // turn off all pointer events to the dragged element, this does 2 things: // 1) allows us to drag text elements without selecting the text // 2) allows us to find out where the dragged element is dropped (see Drop) DragTarget.setAttributeNS(null, 'pointer-events', 'none'); // we need to find the current position and translation of the grabbed element, // so that we only apply the differential between the current location // and the new location var transMatrix = DragTarget.getCTM(); GrabPoint.x = TrueCoords.x - Number(transMatrix.e); GrabPoint.y = TrueCoords.y - Number(transMatrix.f); } }; function Drag(evt) { // account for zooming and panning GetTrueCoords(evt); // if we don't currently have an element in tow, don't do anything if (DragTarget) { // account for the offset between the element's origin and the // exact place we grabbed it... this way, the drag will look more natural var newX = TrueCoords.x - GrabPoint.x; var newY = TrueCoords.y - GrabPoint.y; // apply a new tranform translation to the dragged element, to display // it in its new location DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')'); } }; function Drop(evt) { // if we aren't currently dragging an element, don't do anything if ( DragTarget ) { // since the element currently being dragged has its pointer-events turned off, // we are afforded the opportunity to find out the element it's being dropped on var targetElement = evt.target; // turn the pointer-events back on, so we can grab this item later DragTarget.setAttributeNS(null, 'pointer-events', 'all'); if ( 'BackDrop1' == targetElement.parentNode.id ) { // if the dragged element is dropped on an element that is a child // of the folder group, it is inserted as a child of that group targetElement.parentNode.appendChild( DragTarget ); alert(DragTarget.id + ' has been dropped into a folder, and has been inserted as a child of the containing group.'); } else { // for this example, you cannot drag an item out of the folder once it's in there; // however, you could just as easily do so here // alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id); if( 'bin' == targetElement.id ) { //targetElement.parentNode.appendChild( DragTarget ); var ch=SVGDocument.getElementById(DragTarget.id); var pa=ch.parentNode; pa.removeChild(ch); } } // set the global variable to null, so nothing will be dragged until we // grab the next element DragTarget = null; } }; function GetTrueCoords(evt) { // find the current zoom level and pan setting, and adjust the reported // mouse position accordingly var newScale = SVGRoot.currentScale; var translation = SVGRoot.currentTranslate; TrueCoords.x = (evt.clientX - translation.x)/newScale; TrueCoords.y = (evt.clientY - translation.y)/newScale; }; ]]&gt;&lt;/script&gt; &lt;/svg&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USskaffman
    1. USZain
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POSnap To Grid Functionality Using Javascript
      1. USZain
      1. VTFavorite
    2. VO
      singulars
      1. POSnap To Grid Functionality Using Javascript
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POSnap To Grid Functionality Using Javascript
      1. USAlex Gray
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload