¿Cómo detener la redirección después del evento `drop`?

Question

Después de colocar un archivo en un div en Firefox, la página web se redirigirá a este archivo. Intenté detener esta propagación utilizando el e.preventDefault() de jQuery en el controlador drop, y fallé.

Ver this demo, dejando caer un archivo en #test no volverá a dirigir la página web, pero cayendo en #test1 voluntad, quiero saber por qué. ¿Debo vincular siempre los controladores a dragenter, dragover, dragleave y drop para evitar la propagación después de drop?

actualización:

he encontrado algunos consejos sobre cómo html5doctor:

para decirle al navegador podemos caer en este elemento, todo lo que tenemos que hacer es cancelar el evento dragover. Sin embargo, dado que IE se comporta de manera diferente, nosotros necesitamos hacer lo mismo para el evento dragenter.

y Mozilla claims:

Un oyente para los eventos dragenter y dragover se utilizan para indicar destinos de colocación válidos, es decir, lugares en los elementos arrastrados pueden ser dejados .

Pero pruebo this demo en Firefox, #test obras y #test1 no lo hace, parece Mozilla ha cometido un error, y html5doctor es correcto: Firefox necesita dragover sólo para hacer drop trabajo.

Answer 1

El evento ondragover necesita ser cancelada en Google Chrome y Safari para permitir disparar el evento ondrop.

Answer 2

Noté que no era suficiente cancelar en DragOver, pero también tuve que cancelar onDragDrop y onDragLeave. A continuación, estoy mostrando el registro que indica cuál es el comportamiento del usuario está haciendo:

<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> 

Y entonces su elemento ...

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