I am using Electron and Angular 10 with a registered HostListener for the drag-and-drop events. If I circle a dragged file with the mouse over my app and eventually drop it, it takes several seconds until the drop event is finally triggered.
Before it triggers hundreds of dropenter and dropleave events. Can anyone explain that behaviour?
//Dragover listener
@HostListener('dragover', ['$event'])
public onDragOver(evt) {
console.log('dragover', new Date().getSeconds());
evt.preventDefault();
evt.stopPropagation();
}
//Dragleave listener
@HostListener('dragleave', ['$event'])
public onDragLeave(evt) {
console.log('dragleave', new Date().getSeconds());
evt.preventDefault();
evt.stopPropagation();
}
//Drop listener
@HostListener('drop', ['$event'])
public ondrop(evt) {
console.log('drop', new Date().getSeconds());
evt.preventDefault();
evt.stopPropagation();
}
The log looks like this:
dragleave 23
dragover 23
dragleave 23
dragover 23 <- file dropped around seconds 23
dragleave 23
dragover 23
...
dragleave 25
dragover 25
dragleave 26
dragover 26
drop 26 <-- it took 3 seconds to finally drop the file