如何解决jQuery拖拽Div时点击鼠标偏移的问题？

你的问题源于jQuery UI Draggable默认以元素左上角作为拖拽参考点，当点击元素非左上角区域时，插件会自动调整元素位置让参考点对齐鼠标，从而出现视觉偏移。给draggable()添加cursorAt选项就能解决，以下是带标注的修改代码：

$(document).ready(function() {
  $(".drag").draggable({
    // 核心配置：指定鼠标相对于拖拽元素的位置，抵消偏移
    cursorAt: { 
      top: $(".drag").outerHeight() / 2,  // 垂直方向取元素高度的一半，对应你遇到的半个高度偏移
      left: $(".drag").outerWidth() / 2   // 水平方向取元素宽度的一半，让鼠标居中
    }
  });
});

各部分说明： #

• cursorAt：强制拖拽时鼠标保持在你指定的元素相对位置，彻底解决点击偏移问题。
• outerHeight()/2：动态获取元素总高度（包含padding、border）并取半，适配不同尺寸的拖拽元素；如果元素高度固定，也可以直接写死数值（比如元素高100px就写top: 50）。
• outerWidth()/2：同理实现水平方向居中，确保点击元素任意位置时，拖拽动作都和鼠标位置完全同步。

这个方案兼容你当前的fixed定位设置，不需要改动其他布局代码。

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