Firefox 中的 Html5 拖放鼠标位置

2022-01-11 00:00:00 drag-and-drop javascript html

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

I have an HTML5 application which utilizes drag and drop. Essentially the user can drag an image from a "drawer" onto a canvas to create a larger image. I want the elements to drop in the place where they were release. I have this working in all browsers except Firefox.

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

On the drop event, I am using the following to get the coordinates of the mouse, and calculate the position of the dropped image within the canvas.

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

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

The issue is, this property is not available in FF. Is there any other way to get this? Without it, I can't see how to possible drag and move elements within FF.

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

Note: I am not using the canvas element. I am dropping images to a div. Not sure if that matters.

推荐答案

在firefox中试试这个..

Try this in firefox..

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

相关文章