gMail ha añadido la funcionalidad de permitir arrastrar ficheros de nuestras páginas web directamente al escritorio. Esta funcionalidad, inversa a la que hace unos meses publicaron y que puso en relieve el apoyo de Google al HTML5 y las nuevas funcionalidades javascript. La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas web.
HTML
<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
application/octet-stream
:Eadui.ttf
:http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>
Como vemos el elemento <a /> se encarga de informar de que el elemento es draggable y además informamos el atributo data- para informar los datos necesarios para la descarga.
Javascript
var files = document.getElementById("dragout"), fileDetail;
if(typeof file.dataset === "undefined") {
fileDetail = file.getAttribute("data-downloadurl");
} else {
fileDetail = file.dataset.downloadurl;
}
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetail);
},false);
Si el navegador soporta los atributos data- cogeremos los datos necesarios informados en el HTML anterior, para posteriormente añadirlo al evento dragstart y simular la descarga del fichero con los datos anteriores. Solo apto para navegadores adaptados a las nuevas funcionalidades HTML5. Fácil, simple y potente 😀
5 comentarios, 0 referencias
+
#