Html5 Drag and Drop Mouse Position in Firefox

drag-and-drop, html, javascript

Solution

Try this in firefox..

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

Problem

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. 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; ``` 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. Note: I am not using the canvas element. I am dropping images to a div. Not sure if that matters.

Original source