¿Cuál es el evento Javascript que se desencadena cuando arrastra un archivo desde su escritorio a su navegador?

Question

Estoy intentando implementar un sistema de carga de archivos similar al de gmail. Ya hice todo el problema FileUpload/AJAX y funciona perfecto. El único problema que tengo es Comentarios del usuario.

Por ejemplo ... en gmail, cuando arrastras un archivo a tu navegador (asumiendo IE9 + usuario), hay un área que aparece, permitiéndote soltar el archivo. Creo que es algún tipo de evento de JavaScript que es capturado por un marco (digamos Jquery), que me permite hacer algunas animaciones geniales en el área de colocación.

Mi pregunta es simple .. ¿Qué evento debo capturar para hacer esto? ¿Algunas ideas? ¿Lo estoy haciendo mal?

Answer 1

El evento principal es solo drop.

También necesitará manejar dragenter y , de lo contrario, la acción de soltar provocará una carga de los archivos caídos. Opcionalmente también puede ver dragover.

que tienen un código que registra estos manipuladores, así:

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
}; 

En este caso los dragenter y dragleave manipuladores están allí sólo para cambiar la apariencia de la zona de descenso cuando la materia está siendo arrastrado en él.

Answer 2

Se llama drop, y las propiedades que necesita del objeto de evento estarán en la propiedad originalEvent.

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
}); 

también tiene que desenlazar el dragenter y DragLeave en ese mismo elemento para que se dispare el evento de colocación, si no recuerdo mal.

$(element).on("dragenter dragleave", false);