web-dev-qa-db-fra.com

jQuery.on ("drop") ne se déclenche pas

J'essaie d'implémenter le glisser-déposer de fichiers depuis le bureau de la fenêtre du navigateur. J'ai utilisé jQuery pour attacher trois événements à l'élément HTML comme dans le code ci-dessous:

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

Les événements "glisser-déplacer" et "glisser-laisser" fonctionnent correctement, affichant une bordure en médaillon autour de la page entière lorsque je fais glisser un fichier sur une suppression si je le fais glisser à nouveau.

Cependant, l'événement 'drop' ne semble pas se déclencher du tout, le fichier déposé s'ouvre simplement dans la fenêtre du navigateur.

Quelqu'un sait-il pourquoi cet événement ne se déclenche pas?

Btw, je teste cela dans la dernière version de Chrome et j'utilise jQuery 1.10.2.

javascriptjquerydrag-and-drop
38
TreacleWench

Vous devez annuler tous les événements

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

En plus de la solution de Christian, cela peut être raccourci en:

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

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