Html5 在 Firefox 中拖放鼠标位置答案

【问题标题】：Html5 Drag and Drop Mouse Position in FirefoxHtml5 在 Firefox 中拖放鼠标位置
【发布时间】：2012-11-17 23:07:55
【问题描述】：

我有一个使用拖放的 HTML5 应用程序。本质上，用户可以将图像从“抽屉”拖到画布上以创建更大的图像。我希望元素落在它们被释放的地方。我可以在除 Firefox 之外的所有浏览器中使用此功能。

在drop事件中，我使用下面的方法来获取鼠标的坐标，并计算被放置的图像在画布中的位置。

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

问题是，该属性在 FF 中不可用。有没有其他方法可以得到这个？没有它，我看不到如何在 FF 中拖动和移动元素。

注意：我没有使用 canvas 元素。我正在将图像放到一个 div 中。不确定这是否重要。

【问题讨论】：

bugs.jquery.com/ticket/8523
该bug与jQuery无关。我正在使用 HTML5 API 进行拖放。抱歉，应该指定。
这比它应该的要困难得多。在 Firefox 中的 HTML5 拖动过程中获取鼠标位置 - 你会认为这是基本的。
这是一个已知 6 年的错误：bugzilla.mozilla.org/show_bug.cgi?id=505521。令人震惊的是它还没有修复。

标签： javascript html drag-and-drop

【解决方案1】：

在 Firefox 中试试这个..

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

我在上面尝试了 Kathirvans 的答案，但它对我不起作用。我的页面的魔药是......

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

【讨论】：