Javascript Html5在Firefox中的拖放鼠标位置

Javascript Html5在Firefox中的拖放鼠标位置,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我有一个HTML5应用程序,它利用拖放。基本上,用户可以将图像从“抽屉”拖到画布上,以创建更大的图像。我想把元素放在它们被释放的地方。除了Firefox之外,我在所有浏览器中都可以使用它 在drop事件中,我使用以下命令来获取鼠标的坐标,并计算拖放图像在画布中的位置 var top = evt.originalEvent.offsetX; var left = evt.originalEvent.offsetY; 问题是,此属性在FF中不可用。还有别的办法吗?没有它,我就看不到如何在FF中拖动

我有一个HTML5应用程序,它利用拖放。基本上,用户可以将图像从“抽屉”拖到画布上,以创建更大的图像。我想把元素放在它们被释放的地方。除了Firefox之外,我在所有浏览器中都可以使用它

drop
事件中,我使用以下命令来获取鼠标的坐标,并计算拖放图像在画布中的位置

var top = evt.originalEvent.offsetX;
var left = evt.originalEvent.offsetY;
问题是,此属性在FF中不可用。还有别的办法吗?没有它,我就看不到如何在FF中拖动和移动元素

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

在firefox中尝试此操作

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

我试过上面凯瑟琳的答案,但对我不起作用。我页面上的魔药是

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

我尝试使用
layerX
layerY
,但奇怪的是,它们与Chrome中的相同值不同

然后我意识到,在视网膜显示器上,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);

该bug与jQuery无关。我使用HTML5API进行拖放。对不起,应该指定。这比应该的要难。在Firefox中拖动HTML5时获得鼠标位置-你可能会认为这是一个基本问题。这是一个已知6年的错误:。令人震惊的是,它还没有被修复。