如何为元素设置动画以跟随 div 内的鼠标移动？

Question

我正在尝试使用 jQuery animate 使元素在容器 div 的约束内跟随鼠标移动。当鼠标移动时，元素变为具有与其当前位置匹配的绝对定位，然后向鼠标的位置移动，但在 div 内。

但我似乎无法正确定位垂直位置：元素总是高于容器，有时它的移动方向与应有的方向相反（即鼠标向下移动，元素向上移动)。我在水平定位方面没有任何问题。

代码如下：

var executed = false;
var dronePos = $("#drone").offset().top;

$("body").mousemove(function(event) {

    var x;
    var y;

    //Vertical positioning: If the mouse position is greater than or equal to the left offset of the drone container, and less than or equal to the left offset of the drone container plus the width (if it falls within the drone container)

    if (event.pageX >= $("#droneContainer").offset().left && event.pageX <= $("#droneContainer").offset().left + $("#droneContainer").width()){
        x = event.pageX;

    } else { //if it's to the left
        if (event.pageX < $("#droneContainer").offset().left){
            x = $("#droneContainer").offset().left; 
        }
        else { //if it's to the right
            x = $("#droneContainer").offset().left + $("#droneContainer").width();
        }
    }   

    //Horizontal positioning: If the mouse position is greater than or equal to the to offset of the drone container, and less than or equal to the top offset of the drone container plus the height (if it falls within the drone container)

    if (event.pageY >= $("#droneContainer").offset().top && event.pageY <= $("#droneContainer").offset().top + $("#droneContainer").height()){
        y = event.pageY - dronePos;
    } else { //if it's above
        if (event.pageY < $("#droneContainer").offset().top){
            y = $("#droneContainer").offset().top - dronePos;   
        } else { //if it's below
            y = ($("#droneContainer").offset().top + $("#droneContainer").height()) - dronePos;
        }
    }

    if (executed == false){
        executed = true;
        var position = $("#drone").position();
        $("#drone").css({top: position.top, left: position.left, position:"absolute"}); 
    }

    $("#drone").stop().animate({
        left: x, 
        top: y
    }, 800, "swing");

    dronePos = $("#drone").offset().top;

});

非常感谢任何帮助！ ????

Answer 1

很难说您的代码示例中真正出了什么问题，所以我尝试制作一个更轻量级的版本，希望它可以完成您自己的脚本应该做的事情。

在我看来，不要使用 jQuery animate。 CSS 确实变得非常强大，可以为您完成很多关于定位和转换的繁重工作。

我希望这对您有所帮助。如果您有任何问题，请告诉我。

var $container = $('.container');
var $drone = $('.drone');
var droneCenter = {
  x: $drone.width() / 2,
  y: $drone.height() / 2
};

$container.on('mousemove', function(event) {
  $drone.css('transform', `translate3d(${event.offsetX - droneCenter.x}px, ${event.offsetY - droneCenter.y}px, 0)`);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: safe center;
  justify-content: safe center;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  max-width: 1000px;
  max-height: 1000px;
  padding: 15px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

.drone {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  transition: transform 800ms ease-out;
  will-change: transform;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="drone"></div>
  </div>
</div>