Hacer que las imágenes se arrastren (1)

Esta es una forma de hacer su página más interactiva, de modo que el lector pueda "jugar" con ciertos elementos de la página pudiéndolos arrastrar de un lado a otro dentro del contenedor en el que están.

Este es un ejemplo:



Para hacer que las imágenes se puedan mover y arrastrar entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Nota: Es posible que el código anterior ya lo tengas en la plantilla, si es así no es necesario volverlo a pegar, así que omite ese paso.

Ahora cuando quieras hacer que la imagen de una entrada se pueda arrastrar usa el siguiente código dentro del post:

<img id="drag1" style="cursor:move; border:0px;" src="URL de la imagen"/>
<script type="text/javascript">new Draggable('drag1');</script>

Agrega la URL de la imagen donde se indica y listo. Ten en cuenta que cada vez que vayas a hacerlo deberás cambiar la ID de la imagen (lo que está en color verde), por ejemplo drag2, drag3, etc. de modo que ninguna imagen tenga el mismo ID.

Es así de simple que con Scriptaculous podemos darle más dinamismo al sitio web y más diversión para los más pequeños.


Ver la segunda parte de esta entrada