我试图根据鼠标坐标拖放一个元素。它在chrome和IE中运行良好,但在firefox中不能运行。
下面是我尝试过的:
function createShape(event)
{
var stageContainer = $(".mainArea");
var stageOffset = stageContainer.offset();
clientX = event.clientX;
clientY = event.clientY;
offsetX = stageOffset.left;
offsetY = stageOffset.top;
x = clientX - offsetX; // works in chrome and IE
y = clientY - offsetY; // works in chrome and IE
//Firefox
var offX = (event.offsetX || event.pageX - $(event.target).offset().left);
var offY = (event.offsetY || event.pageY - $(event.target).offset().top);
layerX = event.layerX;
layerY = event.layerX;
screenX = event.screenX;
screenY = event.screenY;
pageX = event.pageX;
pageY = event.pageY;
e = jQuery.event.fix(event);
var target = event.target || event.srcElement;
//Right now this is working but x and y are not exactly correct
x = screenX + offsetX
y = screenY + offsetY
不支持firefox
ClientXY return 0,0
LayerXY return largest number like 173839,173839
pageX and pageY returns 0,0
element.offset().left returns 70 always
element.offset().top returns 63 always
createRect(x, y); // creating element on dragend with x and y coordinates on dragend
}
我如何获得鼠标拖动结束坐标?
遗憾的是,Firefox没有在drag
事件上填充pageX
和pageY
属性。相关的bug报告从2009年就公开了,而且看起来不会很快得到修复。常见的解决方案是侦听父元素上的dragover
事件(尽管很难检测到哪个元素正在被拖动)或以其他方式检测被拖动元素的位置。