Javascript 如何在div中设置元素动画以跟随鼠标移动？

我试图使用jqueryanimate使元素在容器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;

});

var executed=false；
var dronePos=$（“#drone”）.offset（）.top；
$（“body”）.mousemove（函数（事件）{
var x；
变量y；
//垂直定位：如果鼠标位置大于或等于无人机容器的左偏移，并且小于或等于无人机容器的左偏移加上宽度（如果在无人机容器内）
如果（event.pageX>=$（“#droneContainer”）.offset（）.left&&event.pageX=$（“#droneContainer”）.offset（）.top&&event.pageY很难判断您的代码示例中到底出了什么问题，因此我尝试制作一个更轻的版本，希望它能实现您自己的脚本应该做的事情

同样，在我看来，不要使用jQuery
动画
。CSS确实变得非常强大，可以在定位和转换方面为您做很多繁重的工作

我希望这能帮助你。如果你有任何问题，请告诉我


var$container=$（'.container'）；
变量$drone=$（'.drone'）；
无功功率中心={
x:$drone.width（）/2，
y:$drone.height（）/2
};
$container.on（'mousemove'，函数（事件）{
$drone.css（'transform'，'translate3d（${event.offsetX-droneCenter.x}px，${event.offsetY-droneCenter.y}px，0）`）；
})；
*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
显示：网格；
对齐项目：安全中心；
论证内容：安全中心；
}
.包装纸{
宽度：100vw；
高度：100vh；
最大宽度：1000px；
最大高度：1000px；
填充：15px；
}
.集装箱{
位置：相对位置；
宽度：100%；
身高：100%；
背景色：#f7f7f7；
边框：1px实心#f0；
边界半径：5px；
溢出：隐藏；
}
.无人机{
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：25px；
高度：25px；
背景色：红色；
边界半径：50%；
转换：转换800ms缓解；
改变：转变；
指针事件：无；
}

这太棒了，非常感谢！！我从来没有想过从这个角度来处理它！快速补遗-我今天早上开始工作并实现了此解决方案的修改版本，效果非常好！我已经坚持了好几天了。如果我能给你送一杯咖啡或啤酒，请让我知道！再次感谢你！非常好谢谢你。你的热情是足够的报酬，让一切都值得！