Html5在Firefox中拖放鼠标位置

时间:2012-11-17 23:07:55

标签: javascript html5 drag-and-drop

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

drop事件中,我使用以下内容获取鼠标的坐标,并计算画布中已删除图像的位置。

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

问题是,FF中没有此属性。有没有其他方法可以得到这个?没有它,我无法看到如何在FF中拖动和移动元素。

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

3 个答案:

答案 0 :(得分:8)

在firefox中试试..

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

答案 1 :(得分:2)

我尝试使用layerXlayerY,但神秘地说它们与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);

答案 2 :(得分:0)

我尝试过上面的Kathirvans回答,但它对我没用。我页面的神奇药水是......

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