No e.clientX or e.clientY on drag event in Firefox

Question

I've implemented a simple drag and drop system using directives in Angular. It works fine in Chrome, but Firefox doesn't expose event.clientX, event.clientY properties on drag event (They just refuse to fix it).

So I'm looking for a good alternative to expose these properties on drag event: the x,y coordinates are needed for visual feedback on drag event.

Code is here - check out in Chrome and Firefox to see the problem.

In Chrome, drag an item in the folders, you'll have the same item displayed as visual feedback following the mouse, not in Firefox (because Firefox doesn't support e.clientX and e.clientY in the drag event).

the problem is here (beginning line 45):

.on('drag', function(e) {
    if (e.originalEvent.clientX) {
        el.css({
           'top': e.originalEvent.clientY + 10,
           'left': e.originalEvent.clientX + 10
        });
    } else {
        el.css('display', 'none');
    }
});

So how can I get the mouse position on screen during a drag event, in Firefox (the angular way, I mean with directives, no global variable, or whatever)?

Answer 1

You can hook up to dragover on document -- clientX and clientY are exposed there. Use functional closure to not populating global scope. Here is updated PLNKR (tested in Chrome and FF).

Changes to js:

.directive('mpDrag', function($timeout, $window, $document) {

    // keeping coordinates private and 
    // shared among all instances of the directive
    var mouseX, mouseY;

    $document.on("dragover", function(event){
      mouseX = event.originalEvent.clientX;
      mouseY = event.originalEvent.clientY;
    })

    return {
      ...
      link: function($scope, element, attrs) {
        ...
        $timeout(function() {

        ...
            .on('drag', function(e) {
              // just use mouseX, mouseY directely here
              // (btw. you should detect differently when to hide the element)
              console.log(mouseX, mouseY); 
              if (e.originalEvent.clientX) {
                el.css({
                  'top': mouseY,
                  'left': mouseX
                });
              } else {
                el.css('display', 'none');
              }
            });
        });
      }
    };
  })

Answer 2

You must borrow drag coordinates from the document itself:

var dragX = 0,
    dragY = 0;

element.on('dragstart', function(e) {
    document.ondragover = function(event) {
        event = event || window.event;
        dragX = event.pageX,
        dragY = event.pageY;
    };
});

element.on('drag', function(e) {
    el.css({
        'top': dragY + 10,
        'left': dragX + 10
    });
});

Updated plunker