如何在纯(普通) JavaScript中修复我的可拖动代码，移动div的问题(div跳跃或不移动)

// 获取要拖动的div元素
var draggableDiv = document.getElementById("draggable");

// 定义变量来保存初始位置和鼠标位置
var initialX, initialY, mouseX, mouseY;

// 绑定mousedown事件
draggableDiv.addEventListener("mousedown", function(event) {
  // 记录初始位置和鼠标位置
  initialX = draggableDiv.offsetLeft;
  initialY = draggableDiv.offsetTop;
  mouseX = event.clientX;
  mouseY = event.clientY;

  // 绑定mousemove和mouseup事件
  document.addEventListener("mousemove", dragDiv);
  document.addEventListener("mouseup", stopDrag);
});

// 定义拖动函数
function dragDiv(event) {
  // 计算鼠标移动的距离
  var deltaX = event.clientX - mouseX;
  var deltaY = event.clientY - mouseY;

  // 更新div元素的位置
  draggableDiv.style.left = initialX + deltaX + "px";
  draggableDiv.style.top = initialY + deltaY + "px";
}

// 定义停止拖动函数
function stopDrag() {
  // 取消对mousemove和mouseup事件的监听
  document.removeEventListener("mousemove", dragDiv);
  document.removeEventListener("mouseup", stopDrag);
}