Html5 Trascinare e rilasciare la posizione del mouse in Firefox

Question

Ho un'applicazione HTML5 che utilizza il trascinamento della selezione. In sostanza, l'utente può trascinare un'immagine da un "cassetto" su una tela per creare un'immagine più grande. Voglio che gli elementi cadano nel posto in cui sono stati rilasciati. Ho questo lavoro in tutti i browser tranne Firefox.

Nell'evento drop, sto utilizzando quanto segue per ottenere le coordinate del mouse e calcolare la posizione dell'immagine rilasciata all'interno dell'area di disegno.

var top = evt.originalEvent.offsetX; 
var left = evt.originalEvent.offsetY; 

Il problema è che questa proprietà non è disponibile in FF. C'è un altro modo per ottenere questo? Senza di esso, non riesco a vedere come sia possibile trascinare e spostare elementi all'interno di FF.

Nota: non utilizzo l'elemento canvas. Sto facendo cadere le immagini su un div. Non sono sicuro se questo è importante.

Answer 1

Prova questo in Firefox ..

var X = event.layerX - $(event.target).position().left; 
var Y = event.layerY - $(event.target).position().top; 

Answer 2

ho provato Kathirvans risposta di cui sopra, ma non ha funzionato per me. La pozione magica per la mia pagina era ...

var x = e.originalEvent.pageX - $(this).offset().left; 
var y = e.originalEvent.pageY - $(this).offset().top; 

Answer 3

Ho provato ad utilizzare layerX e layerY ma misteriosamente erano diversi da stessi valori in Chrome.

Poi ho realizzato che su un display Retina Firefox setDragImage non tiene conto della bilancia.
In altre parole, chiamando setDragImage(div, 10, 10) posizionare il cursore sul punto 5px; 5px.

Ridicolo, non è vero?

var originalEvent = e.originalEvent, 
    offsetX = originalEvent.offsetX, 
    offsetY = originalEvent.offsetY; 

if (_.isUndefined(offsetX) || _.isUndefined(offsetY)) { 
    // Firefox doesn't take scale into account so we need to compensate for it 
    offsetX = originalEvent.layerX * (window.devicePixelRatio || 1); 
    offsetY = originalEvent.layerY * (window.devicePixelRatio || 1); 
} 

originalEvent.dataTransfer.setDragImage(el, offsetX, offsetY);