求助：如何通过jQuery插件在mousemove时动态改变元素位置？

核心错误原因 #

1. 事件绑定错误：你在绑定mousemove事件时，直接执行了$(".move").moveAnimate(globalX, globalY)，并将其返回的jQuery对象作为事件处理函数传入.on()方法。但jQuery要求事件处理程序必须是函数，这直接导致了TypeError。
2. 参数未动态传递：插件仅在页面初始化时被调用一次，使用了初始值globalX=1和globalY=1，后续鼠标移动时并没有重新调用插件传递新坐标。
3. 动画位置计算错误：插件中left和top的模板字符串写法错误，会生成无效的CSS值（比如"100 + "150px""），无法正确定位元素。
4. 插件元素选择冗余：插件内部全局选择.move，违背了jQuery插件的设计原则——应该操作调用插件的当前元素（即this）。

修正后的代码 #

自定义jQuery插件

(function ($) {
  $.fn.moveAnimate = function (posX, posY) {
    // 遍历调用插件的每个元素，操作当前元素而非全局选择
    return this.each(function () {
      // 先停止之前的动画，避免动画队列堆积
      $(this).stop().animate(
        {
          position: "absolute",
          // 正确计算偏移位置：鼠标坐标 + 150px
          left: posX + 150 + "px",
          top: posY + 150 + "px"
        },
        1000
      );
    });
  };
})(jQuery);

主逻辑文件（index.js）

$(function() {
  // 直接在mousemove回调中调用插件，传递实时鼠标坐标
  $("body").on("mousemove", function(e) {
    $(".move").moveAnimate(e.pageX, e.pageY);
  });
});

关键改进说明 #

• 事件绑定修正：将插件调用放在mousemove的回调函数内，每次鼠标移动时都会执行插件，传递最新的坐标值。
• 动画队列控制：添加.stop()方法，避免鼠标快速移动时产生大量未完成的动画，导致元素卡顿。
• 元素选择优化：插件内部使用this指向调用插件的元素，保证插件的通用性，避免全局选择带来的冲突。
• 位置计算修复：直接通过数值计算生成合法的CSS位置值，确保元素正确移动。

内容的提问来源于stack exchange，提问作者bob