2012-06-11 8 views
5

Ich versuche Datei Drag & Drop in Firefox zu bekommen und bin Baby Schritte zu starten. Im Moment versuche ich nur, einige Dateien in eine Dropzone zu ziehen und eine Liste der gelöschten Dateien zu erhalten. An dieser Stelle möchte ich noch nichts mit den Dateien machen.Datei Drag & Drop in Firefox (v10)

Wenn ich eine Datei (in diesem Fall ein Bild, aber das gleiche passiert unabhängig vom Dateityp) vom Finder in die Dropzone ziehen, kann ich die Dragenter- und Dragexit-Ereignisse sehen. Wenn ich die Datei in die Dropzone verschiebe, wird das Drop-Ereignis nicht ausgelöst. Stattdessen öffnet der Browser das Bild selbst (z. B. zeigt die Adresse file: //path/to/my/image.png).

Mein Javascript sieht wie folgt aus:

dropbox = document.getElementById("standard_file_dropzone"); 

    dropbox.addEventListener("dragenter", function(){console.log('standard enter');}, false); 
    dropbox.addEventListener("dragexit", function(){console.log('standard exit');}, false); 
    dropbox.addEventListener("dragover", $.noop, false); 
    dropbox.addEventListener("drop", function (event) { 
            console.log('standard dropped'); 
            event.stopPropagation(); 
            event.preventDefault(); 

            if((typeof event.dataTransfer.files !== 'undefined') && 
             (event.dataTransfer.files.length > 0)) { 
             console.dir(event.dataTransfer.files); 

            } 
            return false; 
            }, false); 

Mein HTML sieht wie folgt aus:

<div id="standard_file_dropzone" style="height:150px; width:150px; border:solid;"> 
     Standard Drop Files Here 
    </div> 

Also ich frage mich, was falsch ich hier tue? Es scheint nichts (zumindest für mich offensichtlich) falsch mit dem obigen Code zu sein. Die Dragenter/Exit-Ereignisse werden ausgelöst, warum ist das Drop-Ereignis nicht? Warum versucht der Browser, die Datei selbst zu öffnen?

Eine Sache zu beachten, wenn ich meine Seite in Chrome öffne, funktioniert das wie erwartet, also ist dies ein Firefox-spezifisches Problem.

thnx, Christoph

Antwort

5

Die Frage $ .noop als dragover- Handler wurde. Ersetzt man ihn durch eine Funktion, die die Ausbreitung und das Blubbern stoppt, so funktioniert es erwartungsgemäß.

Ich bin manchmal so ein Idiot. : p

+0

Dies funktioniert zwar, aber es ist mir nicht wirklich klar, warum das offensichtlich ist? – Mark

+0

@Christoph Ich bin mit demselben Problem konfrontiert können Sie in der gleichen helfen. –