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