Image follow the mouse, using mousemove event (using Jquery/Javascript)

user_13058743 0
Viewed 1094

I want the image to follow along with the mouse when the mouse is move but when the mouse has clicked once anywhere the image stops following; it begins following when the mouse has clicked again

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta name="description" content="Mousemove">
    
    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

<script>
 $(document).ready(function() {

    $(document).click(function(e) {
     $(".image").mousemove({ top: e.pageY, left: e.pageX });
      });
      
    });
  </script>
</head>

<body>
    <img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food">
</body>
</html>

As you can see, when the mouse moves the image doesn't follow along with the mouse and I'm not able to click anywhere. Why is my code not working?

mousemove jquery javascript
2 Answers

Simply as you can see in this snippet, I add a class once the document clicked and and based on that we change the element position, bind/unbind mousemove event and also remove the added class or not based on alternated click, I think this is what you want:

$(document).ready(function () {
  $(this).click(function (e) {
    if ($('body').hasClass("clicked")) {
      $('body').removeClass("clicked");
      $("img").css({ top: 0, left: 0 });
      $(this).unbind('mousemove');

    } else {
      $('body').addClass("clicked");
      $(this).mousemove(function (e) {
        $("img").css({ top: e.pageY, left: e.pageX });
      });      
    }
  });
});
img {
  position:absolute
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/30x30">

Updated snippet: 

$(document).ready(function () {

  $(this).mousemove(function (e) {
    if (!$('body').hasClass("clicked")) {
      $("img").css({ top: e.pageY, left: e.pageX });          
    }
  });  



  $(this).click(function (e) {
    if ($('body').hasClass("clicked")) {
      $('body').removeClass("clicked");
      //$("img").css({ top: 0, left: 0 });
      //$(this).unbind('mousemove');

    } else {
      $('body').addClass("clicked");
      //$(this).mousemove(function (e) {
        //$("img").css({ top: e.pageY, left: e.pageX });
      //});      
    }
  });
});
img {
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/30x30">

user_8963580

Click toggle between events, nest the mousemove in one instance along with addClass('image') and then removeClass('image') in the other. 

(function($) {
  $.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc + 1) % 2;
    });
    return this;
  };
}(jQuery));

$('#move').clickToggle(function() {
  $(this).mousemove(function(e) {
    $('.image').css({
      'top': e.clientY - 20,
      'left': e.clientX - 20
    });    
  });
  $('#img').addClass('image');
}, function() {
  $('.image').removeClass("image");
});
#img {
  position: relative;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="move">
  <img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQXNfNpnfElPqK1QE2BSbDlBd49DQZE-xlNxRlLKQxIscKgIKpP&usqp=CAU" height="50px" width="55px" alt="food" id="img">
  <div id="log"></div>
</body>

user_15335920
Related