Dragend给出错误的客户端事件位置 最小工作示例问题我想做什么浏览器

如何解决Dragend给出错误的客户端事件位置 最小工作示例问题我想做什么浏览器

最小工作示例

JS Fiddle

const div = document.querySelector('div');

div.addEventListener('dragstart',e=>{
    console.log('start');
  console.log({x: e.clientX,y: e.clientY});
});

div.addEventListener('dragend',e=>{
    console.log('end');
  console.log({x: e.clientX,y: e.clientY});
});

div{
  width: 50px;
  height: 50px;
  background: red;
}

<div draggable='true'></div>

---

问题

让拖动顶点前为{startX,startY}；让拖动顶点后为{endX,endY}

通过向右水平拖动 div，我想观察以下两件事：

1. dragend 回调在鼠标抬起后立即执行。
2. startX 与 endX 不同，但 startY 与 endY 相同。哪个开始位置应该是mouse down位置，结束位置应该是mouse up位置。

然而，对于实际结果：

1. dragend 似乎被延迟了一段奇怪的时间，只有当红色 div 回到其原始位置时才会在鼠标抬起后执行。
2. startX与endX不同，startY与endY不同，开始位置对应鼠标按下位置是正确的，但结束位置完全是胡说八道。

---

我想做什么

包含科目卡片的时间表，允许学生拖放，只有某些区域允许拖放。例如，在 12:00~12:45 期间。因此我需要检查 dragend 位置来决定它应该适合哪个网格。

---

浏览器

Safari 版本 14.0.2 (16610.3.7.1.9)

---

对于以下任何一项，我将不胜感激：

1. 调试建议或想法
2. 另一种方法
3. 第三方插件建议