Creé una barra de progreso del reproductor de video en codesandbox.io ( https://codesandbox.io/s/seekbar-with-thumbnail-and-time-tooltips-forked-h5x8k?file=/src/Progressbar.tsx ), que funciona bien en Chrome pero no en otros navegadores.
Especialmente en Firefox, el control deslizante de la barra de progreso no funciona, los eventos dragStart y dragEnd se activan bien, pero no el evento onDrag.
El evento onDrag tiene todos los valores incorrectos para clientX clientY, etc.
Después de buscar en Google, encontré información sobre transferencia de datos y lo agregué para arrastrar el controlador de eventos de inicio también ...
event.dataTransfer.setData("application/x-moz-node", event.target.id); y event.preventDefault() en mi controlador de eventos dragEnd, pero sigue siendo el mismo.
¿Puede alguien ayudarme aquí?
El código completo está disponible en el enlace de codesandbox que he pegado arriba.
EDITAR: EL EVENTO DE ARRASTRE SE DISPARA, PERO CON LAS SIGUIENTES PROPIEDADES MISMAS CADA VEZ
screenX: 0 screenY: 0 clientX: 0 clientY: 0 pageX: 0 pageY: 0ESTÁ CAUSANDO EL PROBLEMA. ¿POR QUÉ ES TODO ESTO 0?
En Firefox, puede configurar la transferencia de datos antes de que se dispare el evento de arrastre
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) });Puede ver los tipos de arrastre recomendados en este enlace Tipos de arrastre
event.dataTransfer es irrelevante aquí, el problema real es que Firefox no rastrea la posición del puntero durante los eventos de drag . Para entender por qué, revisa esta excelente respuesta a un problema similar al tuyo.
Esto significa que no puede usar drag para actualizar la posición del elemento en función del puntero que lo está arrastrando. Lo que podrías usar en su lugar es dragover :
document.addEventListener('dragover', updateProgress) A diferencia del arrastre, dragover rastrea la posición del puntero para que pueda usarlo para actualizar la posición de su control deslizante. Sin embargo, hay una trampa. En su página, puede haber varios elementos que se pueden arrastrar, por lo que es posible que desee verificar en su oyente ondragover cuál se está arrastrando. Sin embargo, no puede hacerlo fácilmente, ya que el document es el objetivo de dragover , no el elemento arrastrado. Por lo tanto, también debe verificar qué elemento se está arrastrando una vez que se dragstart y tal vez limpiar el oyente ondragover en dragend .
La alternativa es usar laAPI de eventos Pointer , pointerdown , pointermove y pointerup en particular. El esfuerzo de implementación es similar, pero los eventos de puntero deberían ser más consistentes entre navegadores (al contrario que los eventos de drag ) y dispositivos, ya que los eventos de puntero unifican muchos tipos de entradas (toque, mouse, lápiz) detrás de una única API.