What I'm trying to do is make a grid of invisible coordinates on the page equally spaced. I then want a <div>
to be placed at whatever grid coordinate is closest to the pointer when onclick is triggered. Here's the rough idea:
I have the tracking of the mouse coordinates and the placing of the <div>
worked out fine. What I'm stuck with is how to approach the problem of the grid of coordinates.
First of all, should I have all my coordinates in an array which I then compare my onclick coordinate to?
Or seeing as my grid coordinates follow a rule, could I do something like finding out which coordinate that is a multiple of whatever my spacing is is closest to the onclick coordinate?
And then, where do I start with working out which grid point coordinate is closest? What's the best way of going about it?
Thanks!
In terms of working out which grid point is closest - say, for example, each block is 10x10 pixels - to get the grid index you would just divide them out -
If you need to store the data, you could push the grid co-ordinates to an array on click, to reference later.