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

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

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

代码在(在 Chrome 和 FF 中测试).

对js的改动:

.directive('mpDrag', function($timeout, $window, $document) {//保持坐标私有和//在指令的所有实例之间共享变量鼠标X，鼠标Y；$document.on("dragover", function(event){mouseX = event.originalEvent.clientX;mouseY = event.originalEvent.clientY;})返回 {...链接:函数($范围，元素，属性){...$超时(函数(){....on('拖动', function(e) {//这里直接使用mouseX,mouseY//(顺便说一句.你应该以不同的方式检测何时隐藏元素)console.log(mouseX, mouseY);如果(e.originalEvent.clientX){el.css({'顶部':鼠标Y，左":鼠标X});} 别的 {el.css('显示', '无');}});});}};})

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

解决方案

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