Come smettere di reindirizzare dopo l'evento `drop`?

Question

Dopo aver rilasciato un file in un div in Firefox, la pagina Web verrà reindirizzata a questo file. Ho provato a interrompere questa propagazione utilizzando jQuery e.preventDefault() nel gestore drop e non è riuscito.

Vedi this demo, lasciando cadere un file in #test non reindirizzare la pagina web, ma cadere in #test1 volontà, voglio sapere perché. Devo sempre associare i gestori a dragenter, dragover, dragleave e drop per impedire la propagazione dopo drop?

aggiornamento:

ho trovato alcuni suggerimenti su html5doctor:

dire al browser possiamo cadere in questo elemento, tutto quello che dobbiamo fare è annullare l'evento DragOver. Tuttavia, dal momento che IE si comporta in modo diverso, abbiamo necessario fare la stessa cosa per l'evento dragenter.

e Mozilla claims:

un listener per l'dragenter e dragover eventi vengono utilizzati per indicare bersagli a caduta validi, cioè luoghi in cui gli elementi trascinati possono essere eliminato.

Ma io prova this demo su Firefox, #test opere e #test1 non lo fa, sembra Mozilla ha fatto un errore, e html5doctor è giusto: Firefox ha bisogno dragover solo a fare drop lavoro.

Answer 1

Il ondragover manifestazione deve essere annullata in Google Chrome e Safari per consentire generare l'evento ondrop.

Answer 2

Ho notato che non era sufficiente cancellare onDragOver, ma ho dovuto anche annullare onDragDrop e onDragLeave. Qui di seguito, sto mostrando la registrazione indicando quale comportamento l'utente sta facendo:

<script type="text/javascript"> 

    var handledragleave = function handleDragLeave(e) { 
      console.log("Floating away. Do code here when float away happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragdrop = function handleDrop(e) { 
      console.log("Dropping. Do code here when drop happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragover = function handleDragOver(e) { 
      console.log("Floating over. Do code here when float over happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    cancelDefaultBehavior(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 
    } 

$('.your-element-being-dragged-to') 
    .on('DragLeave', handledragleave) 
    .on('DragDrop', handledragdrop) 
    .on('DragOver', handledragover); 

</script> 

E poi il vostro elemento ...

<p class="your-element-being-dragged-to">Drag something here!</p>