title: how to grab puzzle tiles with drop and drag?
body: <p>I have an almost finished puzzle.
  The only problem is that i need to grab the puzzle tiles when they are close to the drop place.
  For example piece 1 is close to a drop place then that drop place must 'grab' that piece and also put in the middle of the drop place. I have tried with css and html to do this but it doesn't works.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $(".reset").click(function() {
          location.reload();
      });
      $("img").draggable()
      $(".droplvl1").droppable({
          drop: function(event, ui) {
              $(this).addClass("ui-state-highlight").find("img");
          }
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Jquery Puzzel&lt;/h1&gt;
      &lt;br&gt;
      &lt;a class="Levels" href="Level1.html"&gt;Level 1&lt;/a&gt;
      &lt;a class="Levels" href="Level2.html"&gt;Level 2&lt;/a&gt;
      &lt;a class="Levels" href="Level3.html"&gt;Level 3&lt;/a&gt;
      &lt;a class="Levels" href="Level4.html"&gt;Level 4&lt;/a&gt;
      &lt;a class="Levels" href="Level5.html"&gt;Level 5&lt;/a&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;img id="puzlvl1.1" data="puzdrop1.1" class="puz1" src="images/lvl1.1.jpg"&gt;
      &lt;img id="puzlvl1.2" class="puz1" src="images/lvl1.2.jpg"&gt;
      &lt;img id="puzlvl1.3" class="puz1" src="images/lvl1.3.jpg"&gt;
      &lt;img id="puzlvl1.4" class="puz1" src="images/lvl1.4.jpg"&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div id="KaderLevel1"&gt;
          &lt;table id="PuzTabel"&gt;
              &lt;tr&gt;
                  &lt;td id="puzdrop1.1" data="puzlvl1.1" class="droplvl1 droppable ui-droppable"&gt;&lt;/td&gt;
                  &lt;td id="puzdrop1.2" class="droplvl1 droppable ui-droppable"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="puzdrop1.3" class="droplvl1 droppable ui-droppable"&gt;&lt;/td&gt;
                  &lt;td id="puzdrop1.4" class="droplvl1 droppable ui-droppable"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;button class="reset"&gt;
          RESET
      &lt;/button&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;a class="Levels" href="Puzzel.html"&gt;Home&lt;/a&gt;
      &lt;br&gt;
  &lt;/body&gt;
  </code></pre>