我在www.example.com(https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx)上创建了一个视频播放器进度条codesandbox.io,它在chrome上运行良好,但在其他浏览器上就不行了。
特别是在火狐上,进度条滑块不起作用,dragStart和dragEnd事件可以正常触发,但onDrag事件不行。
onDrag事件的clientX clientY等值都是错误的。
经过一些谷歌搜索我发现了关于dataTransfer和添加到拖动启动事件处理程序太...
event.dataTransfer.setData("application/x-moz-node", event.target.id);
和event.preventDefault()
,但仍然相同。
有人能帮帮我吗?
完整的代码可以在我上面粘贴的codesandbox链接中找到。
编辑:在拖动事件中触发,但以下属性始终相同
screenX: 0
screenY: 0
clientX: 0
clientY: 0
pageX: 0
pageY: 0
是导致问题的原因。为什么所有这些都是0?
2条答案
按热度按时间xvw2m8pv1#
event.dataTransfer
与此无关,实际问题是Firefox在drag
事件期间不跟踪指针位置。要了解原因,请检查this great answer类似的问题。这意味着你不能使用
drag
来根据拖动元素的指针来更新元素的位置。你可以使用dragover
:与拖动不同,
dragover
跟踪指针位置,因此您可以使用它来更新滑块的位置。但有一个问题。在您的页面上,可能有多个可拖动的元素,因此您可能需要在ondragover侦听器中检查哪个元素正在被拖动。但您不能轻松做到这一点,因为document
是dragover
的目标,因此,在dragstart
被触发后,您还需要检查哪个元素正在被拖动,并可能清理dragend
上的ondragover侦听器。另一种方法是使用Pointer events API,
pointerdown
,pointermove
和pointerup
。实现工作是类似的,但指针事件应该在浏览器(与drag
事件相反)和设备之间更加一致,因为指针事件统一了许多种输入-触摸,鼠标,笔-在单个API后面。7eumitmz2#
你可以通过一个保存当前鼠标位置的全局对象来解决这个问题
并使用mousemove事件和dragover事件更新它。mousemove事件在拖动时不会触发,因此我们依赖dragover事件侦听器进行更新,因为它具有event.clientY。
因此,您可以在任何需要获取鼠标位置的地方使用
mousePosition
对象