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)?

Hushhush

Does this answer your question? Why is event.clientX incorrectly showing as 0 in firefox for dragend event? – Flame

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');
              }
            });
        });
      }
    };
  })

Across

Anyway to do this on Typescript and React? – Gemmiparous

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

Rearward