Javascript 拖放指令，FireFox中没有e.clientX或e.clientY on Drag事件

我用Angular中的指令实现了一个简单的拖放系统。它在Chrome中运行良好，但是Firefox没有在drag event上公开event.clientX、event.clientY属性（他们只是拒绝修复它）。因此，我正在寻找一个好的替代方案，以在拖动事件中公开这些属性：

拖动事件的视觉反馈需要x、y坐标

代码如下：

在Chrome和Firefox中查看问题

在Chrome中，拖动文件夹中的一个项目，鼠标后会显示相同的项目作为视觉反馈，而不是在Firefox中（因为Firefox在拖动事件中不支持e.clientX和e.clientY）

问题就在这里：（从第45行开始）

那么，在Firefox中，我如何在拖动事件中获得鼠标在屏幕上的位置（我指的是使用指令的角度方式，没有全局变量或其他）

---

您可以在

文档

上连接到

dragover

-

clientX

和

clientY

。 使用函数闭包不填充全局范围。此处更新（在Chrome和FF中测试）

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

---

必须从文档本身借用拖动坐标：

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

更新的plunker：

编辑：

---

我向Artur Grzesiak（上述答案的作者）致以最诚挚的歉意。我学到了“发帖前先读别人说的话”这一课。投票给他，因为这是他解决方案的技术骗局。谢谢

谢谢你的回答，我会尽快查出来。两个答案都很好，都很有效。因为你是第一个。你得到了赏金。

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