I am working on SVG, and I have an issue in that I want to implement the "Snap To Grid" functionality in my application.
I have made the grid using line in SVG, and I have also implemented the drag and drop functionality in it. Now I want to implement the "Snap to Grid" functionality in it.
File name of SVG is (DndD.svg) save it with that name
Here is the code
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <object data="DndD.svg" id="oo" style="width: 800px" height="500px"> </object> <span id="trail" style="visibility: hidden"></span> </body> <script type="text/javascript"> 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 <= 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 <= 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 ); </script> </html> SVG CODE other file
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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)"> <rect x="0" y="0" width="500px" height="400px" fill="black" stroke="black" id="rectangle" pointer-events="none" /> <script> < ![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; }; ]]> </script> </svg> 
