Verhindern Standard mit Drag-Ereignissen in Meteor

Question

Ich versuche grundlegende Drag & Drop-Funktionalität in meine Meteor-Anwendung zu implementieren. Ich möchte, dass der Benutzer in der Lage ist, eine Datei (aus ihrem Dateisystem) in ein bestimmtes dom-Element zu löschen und diese Datei im Objekt dataTransfer abzurufen. Leider kann ich nicht verhindern, dass das Ereignis die gesamte Seite des Drop-Events neu lädt. Hier ist meine grundlegende Event-Handler:

Template.sideBar.events({ 

'drop #features' : function(e, t) { 

    e.preventDefault(); 

    var fileList = e.dataTransfer.files; 
    console.log(fileList[0]); 

    return false; 
} 

}); 

Ich habe dies mit Chrome und Firefox getestet. Fehle ich etwas? Hat jemand das erfolgreich umgesetzt?

Answer 1

Nun, das war dumm. Ich denke, ich habe es herausgefunden. Sie müssen preventDefault() auf dem Ereignis dragover zusätzlich zu dem Ereignis drop aufrufen. Hier ist mein Arbeitscode:

Template.sideBar.events({ 

    'dragover #features' : function(e, t) { 
    e.preventDefault(); 
    $(e.currentTarget).addClass('dragover'); 
    }, 

    'dragleave #features' : function(e, t) { 
    $(e.currentTarget).removeClass('dragover'); 
    }, 

    'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 
    } 

}); 

Nicht sicher, warum das funktioniert, aber es tut (zumindest in Chrome).

Answer 2

Update auf meteor@1.4.1, müssen Sie auch dataTransfer.setData() -Methode, um zu holen abgelegte Datei Daten (wenn Sie per Drag n‘Drop Dateien hochladen)

'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 

    e.originalEvent.dataTransfer.getData("text"); 
    //without the previous line you won't be able to get dropped file data; 
    console.log('File name: ' + e.originalEvent.dataTransfer.files[0].name); 
}