Descargando archivos usando Scriptaculous

Drag to Download es un script que utiliza Prototype y Scriptaculous para crear un sistema sencillo que nos permite descargar un archivo con sólo arrastrarlo.

Aunque parezca algo engorroso es bastante sencillo y tiene la particularidad de poder adaptarse a muchos diseños gráficos.

Para probarlo, podemos descargar el ZIP que contiene un demo y un ejemplo con las correspondientes imágenes. De todo eso, lo único fundamental es el archivo dragdrop.js que alojamos en un servidor como Goo... como el que encontremos

Lo incorporamos justo antes de </head>:

<script src="URL_dragdrop.js" type="text/javascript"></script>

Por supuesto, también debemos tener Prototype y Scriptaculous agregados en la plantilla.

Vamos a ver cómo usarlo basándonos en el mismo demo del ejemplo. La idea es sencilla; tenemos que crear un bloque contenedor (en este caso lo llamaremos container) dentro del cual, colocaremos otros tres:

El primero tendrá la fuente y en este caso es una imagen (folder_grey.png), desde allí, arrastraremos el archivo (lo llamaremos drag).
El segundo tendrá el destino, hacia allí arrastraremos el archivo (lo llamaremos dropwrap) y dentro de este, habrá otro al que llamaremos drop y que también sólo será una imagen (download_box.png).
El tercero y último sólo contiene un texto explicativo y lo llamamos status.

<div id="container">
<div id="drag" class="item"><img src="URL_folder_grey.png" /></div>
<div class="dropwrap">
<div id="drop"><img src="URL_download_box.png" /></div>
</div>
<div id="status">Arrastre el ícono para descargar el archivo</div>
</div>

Cada uno de ellos tendrá un nombre que lo identifica (ID) y una vez creados esos bloques, sólo nos falta agregar el script que los controlará así que inmediatamente después, ponemos lo siguiente:

<script type="text/javascript">
new Draggable('drag',{revert: 'true', constraint: 'horizontal'});
Droppables.add('drop', {
accept: 'item', 
hoverclass: 'hovered', 
greedy: 'false', 
onDrop: function() { 
$('status').innerHTML = "Descargando el archivo ..."; 
window.location.href="URL_archivo";
}
});
</script>

Recuerden que todo esto, si lo incluimos en un post, debemos escribirlo en una sola línea.

Lo que nos faltaría es darle un poco de estilo así que podemos usar las propiedades CSS:

<style type="text/css">
#container { /* el bloque contenedor  */
background-color: #404951;
border: 1px solid #99AABB;
margin: 0 auto;
overflow: hidden;
padding: 10px 20px;
width: 500px;
}
#status { /* el texto a mostrar */
text-align: center;
color: #99AABB;
font-size: 17px;
line-height: 60px;
}
#drag { /* el bloque fuente */
cursor: move;
float: left;
}
#drop { /* el bloque de destino */
color: #FFFFFF;
float: right;
}
.hovered { /* el efecto al arratrar el archivo sobre la zona de descarga */
background: url(URL_download_white.png) no-repeat center center;
}
</style>

Y eso es todo, el archivo ZIP conteniendo los archivos puede descargarse desde aquí:

REFERENCIAS:

Drag and Drop usando Scriptaculous (1)

Drag and Drop usando Scriptaculous (2)