如何修改现有DOM元素拖拽代码实现元素跟随鼠标移动效果？

当然可行！咱们只需要调整拖拽的核心逻辑，把原来基于偏移增量的移动方式，改成让元素位置直接跟随鼠标坐标（同时修正点击位置的偏移，避免拖拽时元素跳变），就能实现你想要的实时跟随效果。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<style>
#mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; }
#mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; }
</style>
<body>
<div id="mydiv">
<div id="mydivheader"><img src="https://res.cloudinary.com/piersolutions/image/upload/v1621772508/mpvovedzx30m3gknvmwi.jpg"></div>
</div>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));
function dragElement(elmnt) {
  let mouseOffsetX = 0, mouseOffsetY = 0; // 记录鼠标在元素内的偏移量
  const header = document.getElementById(elmnt.id + "header");
  
  if (header) {
    header.onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // 计算鼠标点击位置相对于元素左上角的偏移量
    mouseOffsetX = e.clientX - elmnt.offsetLeft;
    mouseOffsetY = e.clientY - elmnt.offsetTop;
    // 绑定鼠标移动和松开事件
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // 直接用鼠标当前坐标减去偏移量，设置元素的位置
    elmnt.style.left = (e.clientX - mouseOffsetX) + "px";
    elmnt.style.top = (e.clientY - mouseOffsetY) + "px";
  }

  function closeDragElement() {
    // 移除事件监听，停止拖拽
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>
</body>
</html>

关键改动说明 #

• 记录鼠标偏移量：在dragMouseDown函数中，我们计算了鼠标点击点距离元素左上角的mouseOffsetX和mouseOffsetY。这一步很重要，能保证拖拽时元素不会突然“跳”到鼠标位置，而是从你点击的位置开始跟随移动。
• 直接绑定鼠标坐标：在elementDrag函数里，不再通过原来的增量偏移计算位置，而是直接用鼠标当前的clientX/clientY减去偏移量，实时设置元素的left和top属性，实现完全跟随鼠标的效果。
• 简化变量逻辑：移除了原来的pos1/pos2/pos3/pos4等增量变量，让代码更简洁易懂。

这样修改后，你按住图片拖拽时，元素就会实时跟着鼠标移动，和你想要的效果一致啦。

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