title: Is it possible to make an image move with the cursor when it gets near, and have collision?
body: <p>I am creating a maze game. I got provided with how I would make an image not able to enter a div with jQuery. I also have a code with the image following the cursor. In the second code, I made it so that the image would only go to the mouse if it was a certain distance away. With the collision, the code from the second code got messed up, and now the image teleports to the cursor, instead of how I want it to act. How can I fix this? I am flexible if you need to use pure js or jquery UI. I highly prefer jQuery.</p>
  
  <h1>jQuery from first code:</h1>
  
  <pre><code>function collisionCheck(ax,ay) {
              var collide = false;
  
              var aminY = ay;
              var aminX = ax;
              var amaxX = aminX + $('#image').width();
              var amaxY = aminY + $('#image').height();
  
              $('.maze').each(function(){
  
                  collide = false;
  
                  var bminY = $(this).offset().top - $(window).scrollTop();
                  var bminX = $(this).offset().left - $(window).scrollLeft(); 
                  var bmaxX = bminX + $(this).width();
                  var bmaxY = bminY + $(this).height();
  
                  if (amaxX &lt; bminX) collide = true; // a is left of b
                  if (aminX &gt; bmaxX) collide = true; // a is right of b
                  if (amaxY &lt; bminY) collide = true; // a is above b
                  if (aminY &gt; bmaxY) collide = true; // a is below b
  
                  if (!collide) {
                      return collide;
                  }
              });
            return collide;
          }
  $(document).ready(function(){
          $(document).mousemove(function(e) {
            startMove = true;
        var cursorY = e.pageY;
              var cursorX = e.pageX;
            if (collisionCheck(cursorX, cursorY)) {
          $('html').removeClass('showCursor');
          $("#image").css({
            left: e.pageX,
            top: e.pageY
          });
            } else {
          $('html').addClass('showCursor');
            }
          });
  
          $("#drop").mouseenter(function(){
              alert("Success");
          });
  });
  </code></pre>
  
  <h1>jQuery from the second code:</h1>
  
  <pre><code>var startMove;
  
  $(document).mousemove(function(e) {
    var DIFF_SNAP = 10;
    var DIFF_UNSNAP = 100;
    var difLeft = $('#image').offset().left - e.pageX;
    var difTop = $('#image').offset().top - e.pageY;
    if (!startMove &amp;&amp; Math.abs(difLeft) &lt; DIFF_SNAP &amp;&amp; Math.abs(difTop) &lt; DIFF_SNAP) {
      startMove = true;
      $('html').removeClass('showCursor');
    } else if (startMove &amp;&amp; !(Math.abs(difLeft) &lt; DIFF_UNSNAP &amp;&amp; Math.abs(difTop) &lt; DIFF_UNSNAP)) {
      startMove = false;
    }
    if (startMove) {
      $("#image").css({
        left: e.pageX,
        top: e.pageY
      });
    } else {
      $('html').addClass('showCursor');
    }
  });
  
  $(document).mouseleave(function() {
    startMove = false;
  })
  
  $("#drop").mouseenter(function(){
   if(startMove)
     alert("Success");
  });
  </code></pre>
  
  <p>1st jsfiddle: <a href="https://jsfiddle.net/8pc3u7t9/1/" rel="nofollow">https://jsfiddle.net/8pc3u7t9/1/</a><br>
  2nd jsfiddle: <a href="https://jsfiddle.net/3x7cgLdr/26/" rel="nofollow">https://jsfiddle.net/3x7cgLdr/26/</a></p>