Firefox 中的拖动事件没有 e.clientX 或 e.clientY答案

【问题标题】：No e.clientX or e.clientY on drag event in FirefoxFirefox 中的拖动事件没有 e.clientX 或 e.clientY
【发布时间】：2014-07-22 10:14:32
【问题描述】：

我已经使用 Angular 中的指令实现了一个简单的拖放系统。它在 Chrome 中运行良好，但 Firefox 不会在拖动事件中公开 event.clientX、event.clientY 属性（他们只是拒绝修复它）。

所以我正在寻找一个很好的替代方法来在拖动事件中公开这些属性：拖动事件的视觉反馈需要 x,y 坐标。

代码是 here - 在 Chrome 和 Firefox 中查看问题。

在 Chrome 中，在文件夹中拖动一个项目，您将看到相同的项目显示为鼠标跟随的视觉反馈，而不是在 Firefox 中（因为 Firefox 不支持 e.clientX 和 @ 987654327@ 在拖动事件中）。

问题就在这里（从第 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');
    }
});

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

【问题讨论】：

这能回答你的问题吗？ Why is event.clientX incorrectly showing as 0 in firefox for dragend event?

标签： javascript angularjs firefox drag-and-drop

【解决方案1】：

您可以在 document 上连接到 dragover -- clientX 和 clientY 在那里暴露。使用功能闭包不填充全局范围。这里更新了PLNKR（在 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');
              }
            });
        });
      }
    };
  })

【讨论】：

无论如何要在 Typescript 和 React 上执行此操作？

【解决方案2】：

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

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

【讨论】：