在FireFox中拖放事件的拖放指令,没有e.clientX或e.clientY

Question

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

对于拖动事件的视觉反馈需要x,y坐标.

代码在这里:

http://plnkr.co/edit/ApeyQ4FcdsA8Ez18Roi0?p=preview

在Chrome和Firefox中查看问题.

在Chrome中,拖动文件夹中的项目,您将在鼠标后显示与视觉反馈相同的项目,而不是在Firefox中(因为Firefox在拖动事件中不支持e.clientX和e.clientY).

问题出在这里:(第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中的拖动事件中获取鼠标在屏幕上的位置(角度方式,我的意思是指令,没有全局变量或其他)？

Answer 1

您可以连接到dragover上document- 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');
              }
            });
        });
      }
    };
  })

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

更新的插件：http ://plnkr.co/edit/kA58c7Q0vCMpjBfQ1znV?p=preview

编辑：我对Artur Grzesiak（以上答案的作者）表示最诚挚的歉意。我学到了“在发表之前先阅读别人说的话”的课程。投票给他，因为这是他的解决方案的技术复制。谢谢！