e.originalEvent.pageX and e.originalEvent.pageY are always zero when dragging a div in Firefox

Question

I'm dragging a div using drag API but e.originalEvent.pageX and e.originalEvent.pageY always return 0. .container div can only be dragged using the red square, that's why it can't have draggable attribute from the beginning.

This is my code:

Html:

<div class="container">
    <div class="dragger"></div>
</div>
<label></label>

JS:

$(function(){
    $('.container').on('drag', function(e){
        $('label').text("pageX:" + e.originalEvent.pageX + " pageY:" + e.originalEvent.pageY);
        console.log("pageX:" + e.originalEvent.pageX + " pageY:" + e.originalEvent.pageY);
    }).on('dragstart', function(e){
        e.originalEvent.dataTransfer.setData('text', 'junk');
    });

    $('.dragger').on('mouseover', function(){
        $(this).parent().attr('draggable', 'true');
    }).on('mouseout', function(){
        $(this).parent().removeAttr('draggable');        
    });
});

CSS

.container {
    position:relative;
    background: #ccc;
    width:200px;
    height:200px;
}

.dragger {
    position:absolute;
    top:-8px;
    right:-8px;
    background: red;
    width:16px;
    height:16px;
}

And this is the fiddle http://jsfiddle.net/gypLrxvq/

EDIT

I've found a workaround to get that coordinates:

var pageX = 0;
var pageY = 0;
$(document).on("dragover",function(e) {
    pageX = e.originalEvent.pageX; 
    pageY = e.originalEvent.pageY;
});

The fiddle doesn't work in Firefox for me (I never see text in the label), but it works fine in Chrome (and the label is updated with non-zero coordinates). — Pointy, Oct 30 '15 at 16:34
@Pointy in Firefox if you drag the element using the red square the label text will appear — Ragnar, Oct 30 '15 at 16:38
@Pointy try using console.log(); instead of $('label').text() — Ragnar, Oct 30 '15 at 16:45
Looks like a long lasting Firefox bug. http://stackoverflow.com/q/13920345/3168107 — Shikkediel, Oct 30 '15 at 16:45
[Here's the bug in the Firefox bugzilla.](https://bugzilla.mozilla.org/show_bug.cgi?id=505521) — Pointy, Oct 30 '15 at 16:54
It's probably not even a bug per se, they just define the event differently - and inconveniently. They use `drag` as `originalEvent`, where Chrome uses `MouseEvent` with a type of `drag`. — Shikkediel, Oct 30 '15 at 16:58
Can I do something to get that coordinates? I appreciate any help, I thank you for all comments. — Ragnar, Oct 30 '15 at 17:03

e.originalEvent.pageX and e.originalEvent.pageY are always zero when dragging a div in Firefox

0 Answers0