CODEWITHSUNDEEP
javascriptjqueryfirefoxdrag-and-dropmouse-coordinates
kittu
kittu

Reputation: 7008

Getting mouse coordinates in firefox 41

I am trying to drag and drop a element based on mouse coordinates. Its working fine in chrome and IE but not working in firefox.

Below is what I have tried:

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

Doesn't work in 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

}

How do I get drag end mouse coordinates?

Upvotes: 3

Views: 1148

Answers (1)

n1313
n1313

Reputation: 21381

Sadly, Firefox does not fill pageX and pageY properties on drag events. The relevant bug report is open since 2009 and it doesn't look like it is getting fixed anytime soon. The common solution is to listen for dragover event on the parent element (although it makes it difficult to detect which element is being dragged) or detect the position of the element being dragged in some other way.

Upvotes: 3

Related Questions