jQuery.on ("drop") nicht feuern

Question

Ich versuche, das Ziehen und Ablegen von Dateien vom Desktop in das Browserfenster zu implementieren. Ich habe jQuery verwendet, wie in dem folgenden Code drei Ereignisse in das HTML-Element zu befestigen:

$("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!"); 
}); 

Die ‚dragover‘ und ‚Dragleave‘ Ereignisse funktionieren, um die gesamte Seite einen Einsatz Grenze anzuzeigen, wenn ich eine Datei per Drag über ein Entfernen, wenn ich die Datei wieder herausziehen.

Das Ereignis "drop" scheint jedoch überhaupt nicht ausgelöst zu werden, die abgelegte Datei wird einfach im Browserfenster geöffnet.

Hat jemand eine Idee, warum dieses Ereignis nicht feuert?

Btw, ich teste dies in der neuesten Version von Chrome und mit jQuery 1.10.2.

Answer 1

Sie müssen alle Ereignisse löschen

$("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!"); 
}); 

Answer 2

Neben Christian-Lösung kann dies zu verkürzen:

$('#my-dropzone') 
    // crucial for the 'drop' event to fire 
    .on('dragover', false) 

    .on('drop', function (e) { 
     // do something 
     return false; 
    });