JMiur [E]

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 diablo1

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)
  • 12 comentarios:

    Index  

    Hola!! Queremos invitarte a participar de nuestro nuevo emprendimiento gratuito http://elindexweb.blogspot.com/ directorio de blogs en castellano. Saludos!!

    Responder
    Marcos Cousseau  

    no quiero ser mala honda ni nada...pero es un poco incomodo, ademas de que es muy vistoso, bla bla y bla..pero es preferible el link y listo!:D :D


    por lo menos desde mi punto de vista

    nos vemos JMuir!

    Responder
    ..NaNy..  

    Hola mi pregunta nada tinen ver con esta entrada. Me gustaria saber como se pone la fecha como la tienes tu puesta por favor con la pagina de la imajen y todo.Gracias saludos

    Responder
    Claudio - Poca Tinta  

    Master, debo decir que me parece genial, lo probare si es que no se va la señal de internet como ayer!!.

    Me parece genial, felicitaciones.

    Una consulta, se puede condicionar un Link para que sea descargado de manera automática y no se ejecute en el explorador, por ejemplo los mp3 (se que es sencillo guardarlos, pero esa consulta me la hicieron ayer).

    Saludos

    Responder
    JMiur  

    Marcos: hay para todos los gustos :D

    Nany: Fíjate en este post; es lo que utilizo.

    Claudio: Eso depende del navegador y de la configuración individual. En Firefox, Herramientas | Aplicaciones, asocias los tipos de archvos con determinadas acciones.

    Responder
    Jimmy Geek  

    bueno la verdad, como efecto visual esta muy bueno, a mi m gusto che

    Responder
    Claudio - Poca Tinta  

    En Firefox funciona muy bien, eso ya no es novedad, en Chrome lo descarga sin pedir permiso, costumbre de chrome en dejarse violar, pero... si como siempre hay un pero, en IE no funca!, esos tipos siempre tienen que estar dando la contra.

    SLDS

    Responder
    JMiur  

    Sí, es verdad, no lo había notado :(

    Responder
    ls  

    Buenas. Pensé que no embocaba en el cajón, pero Claudio me tranquilizó. A veces hay que usar IE, lo siento.
    Me gusta, está muy bueno, me tienen hasta acá las incongruencias entre los navegadores.
    Saludos atentos.

    Responder
    JMiur  

    Es una pena que no funcione. No me di cuenta de ese detalle sino, ni lo hubiera puesto.

    Yo también estoy harto de esas cosas :D

    Responder
    ΜigueŁ jίмenez™  

    Hola J.Miur, me gustaria cambiar la opción de descargar archivo y en su lugar hacer que envie los datos de un formulario ¿conoces alguna forma de hacerlo?

    Responder
    JMiur  

    No, la verdad, lo desconozco.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR