Html5 перетаскивание мышью в Firefox

Question

У меня есть приложение HTML5, которое использует перетаскивание. По сути, пользователь может перетащить изображение из "ящика" на холст, чтобы создать увеличенное изображение. Я хочу, чтобы элементы упали в том месте, где они были выпущены. У меня это работает во всех браузерах, кроме Firefox.

На drop Событие, я использую следующее, чтобы получить координаты мыши и рассчитать положение выпавшего изображения на холсте.

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

Проблема в том, что это свойство недоступно в FF. Есть ли другой способ получить это? Без этого я не вижу, как можно перетаскивать элементы внутри FF.

Примечание: я не использую элемент canvas. Я сбрасываю изображения в div. Не уверен, что это имеет значение.

Answer 1

Попробуйте это в Firefox..

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

Answer 2

Я пытался с помощью layerX а также layerY но загадочно они отличались от одинаковых значений в Chrome.

Тогда я понял, что на дисплее Retina Firefox setDragImage не будет принимать во внимание масштаб.
Другими словами, звоня setDragImage(div, 10, 10) поместил бы курсор на 5px; 5px точка.

Смешно, не правда ли?

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);

Answer 3

Я попробовал ответ Kathirvans выше, но это не сработало для меня. Волшебное зелье для моей страницы было...

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