javascript - example - drag and drop js

jQuery.on("drop") no dispara

Question

Estoy intentando implementar arrastrar y soltar archivos desde el escritorio a la ventana del navegador. He usado jQuery para adjuntar tres eventos al elemento HTML como se muestra en el siguiente código:

$("html").on("dragover", function() {
$(this).addClass(''dragging'');
});
$("html").on("dragleave", function() {
$(this).removeClass(''dragging'');
});
$("html").on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
alert("Dropped!");
});

Los eventos ''dragover'' y ''dragleave'' funcionan bien, mostrando un borde de recuadro alrededor de toda la página cuando arrastro un archivo sobre una eliminación si lo arrastro de nuevo.

Sin embargo, el evento ''drop'' no parece dispararse en absoluto, el archivo dropeado simplemente se abre en la ventana del navegador.

¿Alguien tiene alguna idea de por qué este evento no se está disparando?

Por cierto, estoy probando esto en la última versión de Chrome y utilizando jQuery 1.10.2.

Answer 1

Además de la solución de Christian, esto se puede reducir a:

$(''#my-dropzone'')
// crucial for the ''drop'' event to fire
.on(''dragover'', false)
.on(''drop'', function (e) {
// do something
return false;
});

Answer 2

Necesitas cancelar todos los eventos.

$("html").on("dragover", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).addClass(''dragging'');
});
$("html").on("dragleave", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).removeClass(''dragging'');
});
$("html").on("drop", function(event) {
event.preventDefault();
event.stopPropagation();
alert("Dropped!");
});