Html5 Przeciąganie i upuszczanie pozycji myszy w przeglądarce Firefox

Question

Mam aplikację HTML5, która wykorzystuje metodę przeciągnij i upuść. Zasadniczo użytkownik może przeciągnąć obraz z "szuflady" na płótno, aby utworzyć większy obraz. Chcę, żeby elementy opadły w miejscu, w którym zostały wydane. Mam to działa we wszystkich przeglądarkach oprócz Firefoksa.

W przypadku zdarzenia drop używam następujących poleceń, aby uzyskać współrzędne myszy i obliczyć położenie upuszczonego obrazu w obszarze roboczym.

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

Problem polega na tym, że ta właściwość nie jest dostępna w FF. Czy istnieje inny sposób, aby to uzyskać? Bez niego nie widzę możliwości przeciągania i przesuwania elementów w FF.

Uwaga: Nie używam elementu canvas. Upuszczam obrazy do elementu div. Nie jestem pewien, czy to ma znaczenie.

Answer 1

Wypróbuj Firefox ..

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

Answer 2

Próbowałem Kathirvans odpowiedź wyżej, ale nie zrobił praca dla mnie. Magiczny eliksir dla mojej strony było ...

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

Answer 3

Próbowałem za pomocą layerX i layerY ale tajemniczo one różniły się od tych samych wartości w Chrome.

Potem zdałem sobie sprawę, że na wyświetlaczu Retina Firefox setDragImage nie uwzględni skali pod kątem.
Innymi słowy, wywołanie setDragImage(div, 10, 10) ustawi kursor na 5px; 5px punkt.

Śmieszne, nieprawdaż?