Problema de arrastrar y soltar en Chrome relacionado con la escala de Windows (125 %)

4 minutos de lectura

avatar de usuario de miselking
engañando

Tengo un problema con arrastrar y soltar en Chrome (v69.0.3497.100). Específicamente, algunos de los eventos de arrastrar y soltar se activan cuando la escala de Windows no es del 100 %, aunque no deberían activarse.

Verificar apilar ejemplo, e intente arrastrar el rectángulo “azul” sobre sí mismo (simplemente arrastre, muévase un poco hacia abajo y suéltelo). Si la escala de Windows está configurada al 100 % (el zoom del navegador también está al 100 %), entonces se activa un evento (dragEnter) como se esperaba (verifique la consola). Pero, si la escala de Windows está configurada al 125 % (pero el zoom del navegador sigue siendo del 100 %), se disparan tres eventos (dos dragEnter y uno dragLeave), y esperaba que solo se disparara un evento ya que el elemento se arrastró y soltó sobre sí mismo (como fue el caso con un nivel de escala del 100%).

Podría ser que, dado que este es el zoom de Windows (y no el zoom del navegador), el rectángulo izquierdo (“rojo claro”) es más grande de lo que parece, y va debajo del rectángulo derecho, y los eventos se propagan a él, aunque no pude probar eso ya que todos los elementos tienen el tamaño correcto en el inspector.

Esto no parece estar sucediendo en los últimos Firefox, IE o Edge.

¿Alguien sabe por qué sucede esto y cómo solucionarlo?

  • Agregar console.log(event.target.className), en sus controladores de eventos, podría hacer que sea más fácil ver lo que está pasando. Veo varios eventos que se disparan en cualquier escala en Chromium 69.

    – Lonnie Mejor

    20 de septiembre de 2018 a las 6:30

  • El elemento de origen debe activar los controladores dragstart y dragend. Y el elemento de destino debe activar los controladores de arrastrar y soltar. Mi consejo para usted es que arrastre y suelte unidireccionalmente antes de abordar el arrastrar y soltar bidireccional.

    – Lonnie Mejor

    20 de septiembre de 2018 a las 6:40


  • Hola, gracias por tus comentarios, agregando className confirmó que los eventos se disparan incorrectamente (pero ya lo supuse :)). No uso Chromium, pero este es un diseño simple y no deberían activarse múltiples eventos, ¿no le parece? No entendí el segundo comentario, sé qué eventos se activan al arrastrar y soltar, y obtuve el trabajo unidireccional, pero también necesito que este bidireccional funcione también … Tal vez podrías aclarar lo que quisiste decir por ese comentario? Nuevamente, gracias por su interés, cualquier comentario o ayuda es bienvenido, estoy atascado en esto por un par de días, volviéndome loco. 😀

    – malversar

    20 de septiembre de 2018 a las 8:38


  • arrastrar blue div está llamando al evento de soltar de 1st div, podemos proporcionar ancho en px (: host) funciona para los primeros eventos de arrastre en blue div pero no recursivamente

    – T. Shashwat

    25 de septiembre de 2018 a las 11:25

  • Gracias por su respuesta. Hice console.log para eventos drop y ninguno de los drop eventos para izquierda El rectángulo (rojo claro) se produce cuando arrastramos derecho rectángulo (azul). Además, establecer ancho fijo en :host no cumple con mis requisitos, así que eso no funciona.

    – malversando

    25 de septiembre de 2018 a las 12:52


Cuanto más miro este problema, más parece el problema de Chromium. Hace algunos días publiqué una pregunta, luego quise configurar una recompensa por ella, y luego encontré la tuya, y creo que están interrelacionados: problema de desplazamiento de subpíxeles, no se puede configurar scrollTop correctamente en Chrome 69.

Hay algunos informes de errores en el rastreador de problemas de Chromium relacionados con el problema de redondeo de escala: enlace 1, enlace 2… También creé mi propio error: enlace 3. Debería haber más información, pero lleva demasiado tiempo investigar. Creo que podemos unir esfuerzos y llamar más la atención sobre el problema y, por ejemplo, si es responsabilidad de Chromium, ayudarlos con la aclaración y la priorización.

Tengo el mismo problema con la versión 76.0.3809.100 (64 bits).

Y compensé la imagen para compensar el extraño desplazamiento que obtengo en su ejemplo de stackbliz también.

¡Pero con una escala del 200%, necesito multiplicar mi compensación de imagen de arrastre calculada por 4!

El 300% es a las 9
El 350% es a las 12.25

¿Ves el patrón?

Tengo miedo de mi truco/solución para este problema. No estoy seguro de si es solo en Windows, si es solo de escritorio. Pero por ahora supongo que tendré que hacer window.devicePixelRatio^2 para poder continuar con mi trabajo.

Hay casos en los que un sitio web tiene funciones de arrastrar y soltar que no funcionarán dentro del navegador Google Chrome.

Corrección de arrastrar y soltar

  1. Ingrese lo siguiente en la barra de búsqueda superior de Google Chrome. Banderas cromadas: chrome://flags/

  2. Escribe Touch en la barra de búsqueda y configure las siguientes opciones para Enabled.

ingrese la descripción de la imagen aquí

¿Ha sido útil esta solución?