Javascript-форум - Как остановить следование за курсором

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как остановить следование за курсором (https://javascript.ru/forum/events/60998-kak-ostanovit-sledovanie-za-kursorom.html)

Как остановить следование за курсором

При клике по div он начинает двигаться за указателем. Подскажите пожалуйста, как при следующем клике в любой области остановить следование за курсором и плавно вернуть div в изначальную позицию?

Пример в jsfiddle
Пример на сайте (надо кликнуть в пиксельный самолетик в правом нижнем углу)

raffx,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  div.active {
    background-color: #FFFF00;
     transition: none;
  }
div{
  width: 70px;
  height: 140px;
  background: green;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1.8s ease-out;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
 $(function() {
    $(window).on("mousemove", function(pos) {
        $(".active").css({
            "left": pos.pageX + "px",
            "top": pos.pageY + "px"
        })
    });
    $(window).on("click", function(event) {
        if ($("#main").is(".active")) $("#main").removeClass("active").removeAttr("style");
        else if ($(event.target).is("#main")) $("#main").addClass("active")
    })
});
  </script>
</head>

<body>
<div id="main" >Click me!</div>


</body>

</html>

рони,
благодарю вас, прекрасно работает!