Draggable square/rectangle that snaps to grid in JQuery/Javascript

josh954r

New Member
I want to create a rectangle on mousedown that drags across a grid and remains there on mouseup, snapping to the gridlines and outputting the coordinates for top left and bottom right of the it's position (x1,x2,y1,y2). Any help on starting to build this would be much appreciated.I have a 500x500 grid with squares of 10x10 (example - http://jsfiddle.net/nEZyK/5/ but I am literally stuck (I'm a complete beginner at JQuery).Alternatively if anyone has a better idea of how to do this then that would be more than welcome.
  • Some background if you want to suggest a different way to do it: This is for a website running off of an SQL server built in python and django. The data it outputs are jSON objects but otherwise I'm just using html, css and javacript/jQuery for the front end. -- Not sure if that info is useful or not.
 
Back
Top