Certain HTML DOM Events don't fire

I have a file drop location that I want to enable drag and drop capabilities on, but I cannot for the life of me get it to fire when using the ‘drop’ event. If I change the event to ‘click’ however, I can get an output from the callback.
This is the relevant TS code:

ngAfterViewInit() {
    this.elRef.nativeElement.querySelector('.drop').addEventListener('drop', (event) => {
      event.preventDefault();
      console.log('click');
    });
  }

Here is the HTML element:

<ion-item class="drop">
</ion-item>