Drag and drop directive , no e.clientX or e.clientY on drag event in FireFox
I've implemented a simple drag and drop system using directives in Angular.It works fine in Chrome, but Firefox doesnt 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 :
http://plnkr.co/edit/ApeyQ4FcdsA8Ez18Roi0?p=preview
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 doesnt 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');
}
});
});
}
};
})
You must borrow drag coordinates from the document itself:
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: http://plnkr.co/edit/kA58c7Q0vCMpjBfQ1znV?p=preview
EDIT: My sincerest apologies to Artur Grzesiak (author of the above answer). I learned my lesson of "read what others say before posting". Vote him, as this is a tech-dupe of his solution. Thanks!
链接地址: http://www.djcxy.com/p/64280.html