火狐浏览器中HTML5拖放鼠标位置

Question

我有一个使用拖放的HTML5应用程序。用户可以从“抽屉”中拖动图像到画布上创建一个更大的图像。我希望元素落在它们被释放的位置。我已经在除Firefox外的所有浏览器中实现了这个功能。

在drop事件中，我使用以下代码获取鼠标的坐标，并计算画布中放置的图像的位置。

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

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

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

- Chris

---

http://bugs.jquery.com/ticket/8523 - zb'

这个 bug 与 jQuery 无关。我正在使用 HTML5 的拖放 API。抱歉，我应该说明一下的。 - Chris

这比它应该的要困难得多。在Firefox中获取HTML5拖动期间鼠标位置 - 你本以为这是基础操作。 - MSC

这是一个已知的6年bug：https://bugzilla.mozilla.org/show_bug.cgi?id=505521。令人震惊的是它居然还没有被修复。 - MSC

Answer 1

在火狐浏览器中尝试以下操作...

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

- Kathiravan

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

- Dan Abramov

Answer 3

我尝试了上面的Kathirvan答案，但它对我没有起作用。我的页面的魔法药剂是...

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

- louisinhongkong