在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联系，.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'); } }); }); } }; }) 。 使用功能闭包不填充全局范围。此处已更新PLNKR（在Chrome和FF中测试）。

对js的更改：

{{1}}

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

更新了plunker： http://plnkr.co/edit/kA58c7Q0vCMpjBfQ1znV?p=preview

编辑： 我向Artur Grzesiak致敬（上述答复的作者）。我吸取了教训，在发布之前阅读别人说的话＃34;投票他，因为这是他的解决方案的技术。谢谢！