title: Finding the closest grid coordinate to the mouse position with javascript/jQuery
body: <p>What I'm trying to do is make a grid of invisible coordinates on the page equally spaced. I then want a <code>&lt;div&gt;</code> to be placed at whatever grid coordinate is closest to the pointer when onclick is triggered. Here's the rough idea:</p>
  
  <p><a href="https://i.stack.imgur.com/2FMRG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2FMRG.png" alt="alt text"></a>
  </p>
  
  <p>I have the tracking of the mouse coordinates and the placing of the <code>&lt;div&gt;</code> worked out fine. What I'm stuck with is how to approach the problem of the grid of coordinates.</p>
  
  <p>First of all, should I have all my coordinates in an array which I then compare my onclick coordinate to?</p>
  
  <p>Or seeing as my grid coordinates follow a rule, could I do something like finding out which coordinate that is a multiple of <em>whatever my spacing is</em> is closest to the onclick coordinate?</p>
  
  <p>And then, where do I start with working out which grid point coordinate is closest? What's the best way of going about it?</p>
  
  <p>Thanks!</p>