Firefox 中的 Html5 拖放鼠标位置

Html5 Drag and Drop Mouse Position in Firefox(Firefox 中的 Html5 拖放鼠标位置)
本文介绍了Firefox 中的 Html5 拖放鼠标位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个使用拖放的 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;

这篇关于Firefox 中的 Html5 拖放鼠标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)