O evento de queda de HTML5 não funciona, a menos que o dragover seja manipulado

Eu estou ouvindo o evento drop e fazendo e.preventDefault() Mas está tentando abrir o arquivo descartado. Estava funcionando bem até ontem. Mas só hoje Ele quebrou por algum motivo desconhecido. Eu fiz um JsFiddle#bwquR/10 para refletir o mesmo.

Editar:

Parece que se você não fizer a dragover evento dragover não poderá ser manipulado. mesmo no violino Se você comentar o dragover Não vai funcionar.
No trabalho real eu perdi a grafia do dragover Mas ainda é uma drop pergunta não vai funcionar sem dragover

O violino estava realmente funcionando, mas o corpo era tão pequeno (apenas texto DROP lá). Estava ocorrendo um evento de drop apenas naquela pequena área onde o texto DROP não está em todo o corpo. Então eu pensei que não estava funcionando. Desculpe pela confusão.

Eu acho que é porque isso sem manipulador de events dragOver, o manipulador de events padrão do evento dragOver é usado, assim, nenhum evento drop é acionado depois disso. Há uma necessidade com o e.preventDefault para o evento dragOver antes do evento de soltar.

Eu não tenho certeza se eu entendi o seu problema corretamente, mas se você quiser ler arquivos soltos você precisa lidar com o evento dragover e colocar lá pelo menos esta linha de código:

 evt.dataTransfer.dropEffect = 'copy'; 

Caso contrário, dropEffect é null por padrão e você não obterá nenhum dado.

https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Drag_operations

Se você quiser permitir uma queda, deverá impedir a manipulação padrão, cancelando o evento. Você pode fazer isso retornando false de um ouvinte de evento definido por atributo ou chamando o método event.preventDefault do evento. O último pode ser mais viável em uma function definida em um script separado.

 

Chamar o método preventDefault durante um evento dragenter e dragover indicará que uma queda é permitida nesse local. No entanto, você normalmente desejará chamar o método preventDefault somente em determinadas situações, por exemplo, somente se um link estiver sendo arrastado. Para fazer isso, chame uma function que verifica uma condição e só cancela o evento quando a condição é atendida. Se a condição não for atendida, não cancele o evento e não ocorrerá uma queda se o usuário soltar o botão do mouse.

https://developer.mozilla.org/pt-BR/docs/Web/Events/dragover

  /* events fired on the drop targets */ document.addEventListener("dragover", function( event ) { // prevent default to allow drop event.preventDefault(); }, false); 

Funciona bem para mim. Você está carregando isso como um HTTP ou um URL FILE? Eu acredito que ele precisa ser um URL HTTP com o Chrome.