dropEffect no funciona al arrastrar archivos a Firefox

Tengo una página web que permite arrastrar archivos desde fuera del navegador y colocarlos en un destino en mi página web. Mi aplicación cargará una copia de cada archivo, por lo que configuro dataTransfer.dropEffect para "copiar", por lo que el navegador indicará al usuario que esto dará como resultado una copia en lugar de un movimiento. Esto funciona como se esperaba en Chrome: al arrastrar un archivo sobre mi destino, el navegador muestra un cursor de "copia". Pero Firefox parece ignorar el efecto drop y continúa mostrando su cursor de "movimiento" predeterminado mientras los archivos se arrastran sobre mi destino de caída. He realizado muchas búsquedas y no he encontrado ninguna mención de un problema de Firefox como este, así que probablemente paso por alto algunos detalles en mi código. He incluido un ejemplo desglosado que ilustra el problema a continuación. Gracias de antemano si alguien puede detectar lo que estoy haciendo mal.dropEffect no funciona al arrastrar archivos a Firefox

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Stuff</title> 

<style type="text/css"> 
P 
{ 
background-color: #cccccc; 
padding: 10px; 
} 

</style> 
<script type="text/javascript"> 

function DocOnLoad() { 
var target = document.getElementById('dropTarget'); 
target.addEventListener('dragenter', function (e) { 
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'copy'; 
}); 
target.addEventListener('dragover', function (e) { 
    e.preventDefault(); 
    e.dataTransfer.dropEffect = 'copy'; 
}); 
target.addEventListener('drop', function (e) { 
    e.preventDefault(); 
    var files = e.dataTransfer.files; 
    alert(files[0].name); 
}); 
} 



</script> 

</head> 

<body onLoad="DocOnLoad()" > 

<p id="dropTarget">Drop target.</p> 

</body> 
</html>

Fuente

2012-02-16 BradVoy

que tiene el mismo problema. Mis observaciones son que Chrome y Safari en Windows respetan dropEffect, pero Firefox 13, Opera 11.64 e Internet Explorer 9 y 10 no lo hacen. :( – thomthom

Se parece más a un error de mozilla que a otra cosa.

Probé un par de pruebas y siempre el mismo resultado.

Mantenga un ojo aquí para realizar un seguimiento del ERROR: dataTransfer.dropEffect

buena suerte!

EDITAR: Aquí está el desarrollador mozilla. eslabón de DOCS: DataTransfer#dropEffect

echar un vistazo para el "mozCursor" parte ...

Fuente

2012-08-20 06:37:18 gmo

mozCursor es un paso en la dirección correcta, pero es una lástima que Firefox no funcione como los otros navegadores. – BradVoy

Firefox muestra el cursor "copia" si el usuario mantiene la tecla Ctrl mientras se arrastra por defecto.

La única forma de evitar esto es establecer el dataTransfer.effectAllowed en el grageo y el dataTransfer.dropEffect para "copiar".

Ejemplo:

<html> 
 
<head> 
 
<style> 
 
    #div1 { width:300px;height:70px;padding:10px;border:1px solid black; } 
 
</style> 
 
<script> 
 
    function dragOver(e) { 
 
    e.dataTransfer.dropEffect = "copy"; 
 
    e.preventDefault(); 
 
    } 
 
    function dragStart(e) { 
 
    e.dataTransfer.effectAllowed = "copy"; 
 
    e.dataTransfer.setData("text", e.target.id); 
 
    } 
 
</script> 
 
</head> 
 
<body> 
 
    <div id="div1" ondragover="dragOver(event)"></div> 
 
    <br> 
 
    <h1 id="drag1" draggable="true" ondragstart="dragStart(event)">DRAG ME</h1> 
 
</body> 
 
</html>

Fuente

2015-06-30 08:05:19

dropEffect no funciona al arrastrar archivos a Firefox

Respuesta

Cuestiones relacionadas