¿Cómo hago que clientX y clientY trabajen dentro de mi controlador de eventos "drag" en Firefox?

Question

Parece que Mozilla firefox 3.x tiene un error al escuchar el evento "ondrag". El objeto de evento no informa la posición del objeto que se está arrastrando, clientX, clientY y otras compensaciones de pantalla están todas configuradas en cero. Esto es bastante problemático ya que quería hacer un elemento proxy basado en el elemento que se está arrastrando y, por supuesto, usar clientX y clientY para ajustar su posición.

Sé que hay cosas geniales, como setDragImage en HTML5, pero quiero proporcionar una abstracción genérica para DD nativo entre los navegadores.

código defectuoso:

document.addEventListener('drag', function(e) { 
    console.log(e.clientX); // always Zero 
}, false); 

Nota: Este problema no ocurre en otros eventos (dragstart, dragover) y los eventos mousemove no puede ser capturado mientras se arrastra algo.

Por favor ayuda!

Answer 1

Encontré una solución, coloqué un oyente en el evento "dragover" a nivel de documento, ahora obtengo las propiedades X e Y correctas que puedo exponer a través de un objeto compartido globalmente.

Answer 2

El evento de arrastre en HTML 5 no es completamente funcional en los navegadores de hoy. Para simular una situación de arrastrar y soltar, debe usar:

1. Agregue un evento onmousedown, estableciendo un var true.
2. Agregue un evento onmouseup, estableciendo que var falso.
3. Agregue un evento onmousemove, verificando si esa var es verdadera, y si lo es, mueva su div de acuerdo con las coordenadas.

Esto siempre funcionó para mí. Si tiene algún problema, póngase en contacto de nuevo, puedo dar algunos ejemplos.

buena suerte!

Answer 3

sé que hay cosas interesantes en torno como setDragImage en HTML5 pero desea proporcionar una abstracción genérica para DD nativa entre los navegadores.

Pero por qué hacer algo como esto, no hay bibliotecas como JQuery & Prototype disponible para navegadores arrastre & gota?

O bien, si desea implementar una biblioteca DD propia, puede tomar la ayuda de sus métodos o ampliarlos, ya que ambas bibliotecas están siguiendo el paradigma orientado a objetos.

Esto ahorrará mucho tiempo.