Html5在Firefox中拖放鼠标位置
我有一个利用拖放的HTML5应用程序。 基本上，用户可以将图像从“抽屉”拖到画布上以创建更大的图像。 我希望元素在他们发布的地方下降。 我有这个工作在除Firefox以外的所有浏览器。
在drop事件中，我使用以下命令来获取鼠标的坐标，并计算画布内放置图像的位置。
var top = evt.originalEvent.offsetX;
var left = evt.originalEvent.offsetY;
问题是，这个属性在FF中不可用。 有没有其他办法可以得到这个？ 没有它，我看不到如何在FF中拖动和移动元素。
注意：我没有使用画布元素。 我正在将图像放到div上。 不知道这是否重要。
试试这在Firefox中..
var X = event.layerX - $(event.target).position().left;
var Y = event.layerY - $(event.target).position().top;
我尝试过使用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);
我试过Kathirvans的回答，但它对我没有任何作用。 我的网页的魔药是...
var x = e.originalEvent.pageX - $(this).offset().left;
var y = e.originalEvent.pageY - $(this).offset().top;