2012-06-11 24 views
5

Estoy tratando de obtener el archivo arrastrar y soltar en Firefox y estoy dando pequeños pasos para comenzar. En este momento, estoy tratando de arrastrar algunos archivos a una zona de caída y obtener una lista de los archivos caídos. En este punto, no quiero hacer nada con los archivos todavía.Archivo Arrastrar y soltar en Firefox (v10)

Cuando arrastro un archivo (en este caso una imagen, pero sucede lo mismo independientemente del tipo de archivo) desde el buscador hasta la zona de colocación, puedo ver cómo se disparan los eventos dragenter y dragexit. Cuando tiro el archivo a la zona de caída, el evento de caída no se activa. Lo que sucede en cambio es que el navegador abre la imagen por sí mismo (por ejemplo, la dirección muestra el archivo: //path/to/my/image.png).

Mi JavaScript parece a esto:

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); 

Mi HTML se parece a esto:

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

Así que me pregunto qué estoy haciendo mal aquí? No parece haber nada (al menos obvio para mí) mal con el código anterior. Los eventos dragenter/exit se activan, ¿por qué no es el evento drop? ¿Por qué el navegador está intentando abrir el archivo?

Una cosa a tener en cuenta, cuando abro mi página en Chrome, esto está funcionando como se esperaba, así que este es un problema específico de Firefox.

thnx, Christoph

Respuesta

5

La cuestión estaba usando $ .noop como el controlador dragover. Sustituyéndolo por una función que detiene la propagación y el burbujeo, comenzó a funcionar como se esperaba.

A veces soy un idiota. : p

+0

Esto realmente funciona, pero no es muy claro para mí ¿por qué es obvio? – Mark

+0

@Christoph me estoy enfrentando el mismo problema puede ayudar en lo mismo. –