使用HTML Drag and Drop API平滑移动容器元素的问题

我尝试用HTML拖拽API实现通过拖拽手柄重新定位容器元素的功能，目前通过drag和dragend事件实现了移动，但存在卡顿问题：元素会先弹回原位置，再渲染到拖拽后的位置。我知道用mousedown有更简单的方案，但应用中已有全局mousedown监听器用于其他功能，希望继续使用拖拽API，恳请帮助！

问题根源 #

你的代码存在几个核心问题导致卡顿和位置跳变：

• 未记录鼠标与容器的初始偏移，直接用screenX/screenY设置位置会让容器跳转到鼠标绝对位置，产生视觉跳动
• drag事件用screenX、dragend用clientX，两种坐标体系不一致，导致拖拽结束时位置计算错误
• 未处理dragstart事件并阻止默认行为，浏览器自带的拖拽镜像会干扰容器的实时渲染

修正后的完整代码 #

HTML

<div class="container" id="drag-container">
  <div  
       class="drag-handle" 
       id="drag-handle"
       draggable="true">drag me</div>
</div>

CSS

.drag-handle {
  cursor: grab;
  padding: 8px;
  background: #eee;
}
.container {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 16px;
  border: 1px solid #ccc;
}

JavaScript

const dragHandle = document.getElementById("drag-handle");
const container = document.getElementById("drag-container");

// 记录拖拽开始时，鼠标相对于容器左上角的偏移量
let offsetX = 0;
let offsetY = 0;

dragHandle.addEventListener("dragstart", (event) => {
  // 阻止浏览器默认拖拽行为，避免生成干扰视觉的拖拽镜像
  event.preventDefault();
  
  // 计算鼠标与容器的偏移：鼠标位置 - 容器当前的视口坐标
  const containerRect = container.getBoundingClientRect();
  offsetX = event.clientX - containerRect.left;
  offsetY = event.clientY - containerRect.top;
  
  // 部分浏览器需要设置拖拽数据才能触发后续拖拽事件，这里用空文本占位
  event.dataTransfer.setData("text/plain", "");
});

dragHandle.addEventListener("drag", (event) => {
  // 用视口坐标计算容器位置，减去偏移量保证拖拽时鼠标位置相对不变
  container.style.left = `${event.clientX - offsetX}px`;
  container.style.top = `${event.clientY - offsetY}px`;
});

关键改动说明 #

1. 添加dragstart事件处理：计算鼠标与容器的偏移量，确保拖拽时容器不会突然跳转；同时阻止默认行为消除浏览器自带的拖拽反馈
2. 统一坐标体系：全程使用clientX/clientY（相对于视口的坐标），避免screenX（相对于屏幕）带来的跨设备或窗口缩放误差
3. 移除dragend的重复设置：drag事件已经实时更新了容器位置，dragend再设置会导致不必要的位置跳变

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