title: JavaScript & jQuery; how to do snapping drag and drop
body: <p>I am looking for advice from all you wonderful people on the best way to do snapping drag and drop.</p>
  
  <p>As part of a simple board game I am currently coding in JS (using jQuery for effects) users should be able to drag tiles from a dock onto a grid.</p>
  
  <p>How does one complete the following objectives (preferably using jQuery).  </p>
  
  <blockquote>
    <ol>
    <li>Enable drag and drop onto the grid  </li>
    <li>Ensure during drag and drop items snap to each square of the grid  </li>
    <li>If the tile is placed completely off the grid, return to original place (dock)  </li>
    <li>If the tile is over the grid (at this point snapped), return current x &amp; y to a function  </li>
    <li>Make any tiles being dragged slightly transparent, and go full color once in place or returned to dock</li>
    </ol>
  </blockquote>
  
  <p>Sorry to ask such a big question, I just can't find any accurate advice online that would be me achieve this!</p>
  
  <p>Many thanks,</p>
  
  <p><strong>Edit: THE ANSWERS</strong><br>
  1&amp;2 are solved by "draggable": <a href="http://jqueryui.com/demos/draggable" rel="noreferrer">http://jqueryui.com/demos/draggable</a><br>
  3 is solved by "droppable" <a href="http://jqueryui.com/demos/droppable" rel="noreferrer">http://jqueryui.com/demos/droppable</a><br>
  4 is solved by the above to validate and then <code>$(this).position.left</code> &amp;&amp; <code>$(this).position.top</code><br>
  5 is solved by a simple <code>$(this).css({opacity:0.5})</code> inside start on drag and the opposite on finish drag  </p>
  
  <p>Simples!</p>