Desactivar el arrastre de una imagen del sistema de archivos en un navegador.

Question

Estoy experimentando con la API de archivos HTML5. Sin embargo, observo que los navegadores tienen un comportamiento predeterminado donde muestran una imagen si arrastra la imagen al navegador. Sin embargo, esto puede ser molesto si su objetivo es cargar la imagen en lugar de verla.

¿Me pregunto si hay una manera de prevenir este comportamiento? He intentado con stopPropagation/preventDefault en un evento ondrop que funciona un poco, pero deja el cursor "drop" en su lugar dando la impresión de que la imagen puede soltarse en cualquier parte de la página.

Idealmente, solo vería el cursor "soltar" en el área designada donde las imágenes se deben quitar.

Answer 1

El objeto dataTransfer tiene dropEffect y effectAllowed propiedades. No estoy seguro de cuál es la diferencia entre ellos, pero establecer ambos en 'ninguno' debería ayudar.

$(document).bind({ 
    dragenter: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
    dt.effectAllowed = dt.dropEffect = 'none'; 
    }, 
    dragover: function (e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     var dt = e.originalEvent.dataTransfer; 
     dt.effectAllowed = dt.dropEffect = 'none'; 
    } 
}); 

Ver el http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - caída permitida al rectángulo solamente.

Answer 2

Quizás esto es lo que estás buscando? Lo diseñé yo mismo.

http://rightandrong.info/html5upload/Upload.html