javascript - onDrag 事件 clientX 在 Firefox 中始终为 0

Question

我在 codesandbox.io ( https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx ) 上创建了一个视频播放器进度条，它在 chrome 上运行良好，但在其他浏览器上运行不佳。

特别是在 firefox 上，进度条 slider 不工作，dragStart 和 dragEnd 事件触发得很好，但不是 onDrag 事件。

onDrag 事件对于 clientX clientY 等的所有值都是错误的。

经过一番谷歌搜索后，我发现了 dataTransfer 并将其添加到拖动启动事件处理程序中......

event.dataTransfer.setData("application/x-moz-node", event.target.id);

和 event.preventDefault() 在我的 dragEnd 事件处理程序上，但仍然相同。

有人可以帮我吗？

我在上面粘贴的 codesandbox 链接中提供了完整代码。

编辑:拖动事件正在触发，但以下属性每次都相同

screenX: 0

screenY: 0

clientX: 0

clientY: 0

pageX: 0

pageY: 0

是导致问题的原因。为什么这一切都是 0？

Answer 1

在 Firefox 中，您可以在触发拖动事件之前设置 dataTransfer

d = document.getElementById('d');

d.addEventListener('drag', function(e){
    console.log("drag:", e)
});

d.addEventListener('dragstart', function(e){
    e.dataTransfer.setData('application/node type', this);
    console.log("dragstart:", e)
});

您可以在这个链接中看到推荐的拖动类型 Drag Types