在FireFox中的拖动事件中拖放指令，不使用e.clientX或e.clientY
我已经在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中获得鼠标位置（角度方式，我的意思是指令，没有全局变量或其他）？
你可以连接到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');
}
});
});
}
};
})
您必须借用文档本身的拖动坐标：
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（上述答案的作者）。 我学到了“在发帖前阅读别人说的话”的教训。 投票给他，因为这是他解决方案的技术难题。 谢谢！
链接地址: http://www.djcxy.com/p/64279.html上一篇: Drag and drop directive , no e.clientX or e.clientY on drag event in FireFox