I've created a video player progress bar on codesandbox.io (https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx), which is working fine on chrome but not on other browsers.
Specially on firefox the progressbar slider isn't working, dragStart and dragEnd event are firing just fine but not the onDrag event.
onDrag event has all the wrong values for clientX clientY etc.
After some googling Ive found about dataTransfer and added that to drag start event handler too...
event.dataTransfer.setData("application/x-moz-node", event.target.id);
and event.preventDefault() on my dragEnd event handler, but still the same.
Can someone help me out here?
Entire code is available at the codesandbox link I've pasted above.
EDIT: ON DRAG EVENT IS FIRING, BUT WITH THE FOLLOWING PROPERTIES SAME EVERYTIME
screenX: 0
screenY: 0
clientX: 0
clientY: 0
pageX: 0
pageY: 0
IS CAUSING THE ISSUE. WHY IS ALL THIS 0?
In Firefox you can set dataTransfer before the drag event is fired
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)
});
You can see recommended drag types in this link Drag Types
event.dataTransfer is irrelevant here, the actual problem is that Firefox doesn't track pointer position during drag events. To understand why, check this great answer to a problem similar to yours.
This means you can't use drag to update element's position based on the pointer which is dragging it. What you could use instead is dragover:
document.addEventListener('dragover', updateProgress)
Unlike drag, dragover tracks pointer position so you can use it to update the position of your slider. There is one gotcha though. On your page, there might be multiple draggable elements so you might want to check in your ondragover listener which one is being dragged. You can't easily do that though, since the document is the target of dragover, not the dragged element. So you also need to check which element is being dragged once dragstart is fired and maybe clean up the ondragover listener on dragend.
The alternative is to use Pointer events API, pointerdown, pointermove and pointerup in particular. The implementation effort is similar, but Pointer events should be more consistent across browsers (contrary to drag event) and devices, since Pointer events unifies many kinds of inputs - touch, mouse, pen - behind a single API.