Mover imágenes y otros elementos. Scriptaculous.

Este es otro motivo por el que sigo prefiriendo que no se vea el gadget de seguidores, antes que quitar script.aculo.us de mi plantilla.

Hace unos días aprendí en Ciudad Blogger, tras ver otra aplicación similar en Dormiluno Blog, que con este conocido script, podemos fácilmente crear elementos móviles en nuestro blog.

Lo primero es instalar el script si es que no lo tenemos ya, copiando justo antes de </head> las dos librerías necesarias y guardando los cambios una vez hecho.

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

Ahora, cuando queramos poner en algún sitio (barra lateral, cabecera, una entrada...) algún elemento que el usuario pueda mover, simplemente tendremos que ponerle un ID con un identificador propio y posteriormente, hacer una llamada a la función new Draggable indicando ese mismo ID. Más o menos así:

<img id="icono1" style="cursor:move; border:0px;" src="URL_IMAGEN"/><script type="text/javascript">new Draggable('icono1');</script>

¡Pruébalo!

En un principio, el elemento no se puede mover más allá de los límites del contenedor dónde se instale y por tanto, desaparecerá cuando se acceda a otra capa colindante. Sería como si hubiera alfombras alrededor del contenedor. Al mover arrastrando, cuando llegamos a ellas, el elemento se queda debajo sin posibilidad de verlo.

Es importante que los identificadores (ID) de cada elemento -icono1 en el anterior ejemplo-sean distintos a los de otros a los que también se le aplique este sistema. Es la manera de que el script sepa qué es exactamente lo que tiene que mover. Por cada elemento con ID, hay que añadir un new Draggable con su parámetro (ID) y un punto y coma al final.

<div style="margin: 0px auto; text-align: center;"><img id="icono2" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_IMAGEN2" /> <img id="icono3" style="border: 0px none ; margin: 0px auto; cursor: move;" src="URL_IMAGEN3" />
Probar</div>
<script type="text/javascript">new Draggable('icono2');new Draggable('icono3');</script>

Probar

Esta capa cumplió ayer su mayoría de edad y se ha independizado :)
Prueba a moverla.

¿Y ahora que tal si aplicamos el truquillo a un DIV entero? Pues exactamente igual. Le colocaremos un nuevo ID (uno que todavía no hayamos utilizado) y escribiremos también new Draggable con ese ID. Este sería el código:

<div id="div1" style="border: 2px solid rgb(0, 0, 0); margin: 0px 0px 10px; padding: 4px; background: rgb(153, 0, 0) none repeat scroll 0% 0%; float: right; cursor: move; width: 250px; height: 60px; color: rgb(255, 255, 255); text-align: center;">Esta capa cumplió ayer su mayoría de edad y se ha independizado :)

Prueba a moverla.</div><script type="text/javascript">new Draggable('div1');</script>

Cuando necesitemos manejar muchos elementos, la llamada a la función new Draggable puede incluir todos los ID correspondientes, pero siempre tendrá que estar después de definir (redactar) los correspondientes bloques.

<script type="text/javascript">new Draggable('icono4'); new Draggable('icono5'); new Draggable('icono6'); new Draggable('div2');</script>

Como variante, también se puede aplicar a un gadget entero de la barra lateral. Estos suelen tener una identificación asignada, por lo que sería suficiente con hacer la llamada a la función. Si acaso, convendría añadirle una etiqueta STYLE con un CURSOR:MOVE; tal y como se ha hecho en los ejemplos de esta entrada, para que el puntero cambie de apariencia y se sepa que el elemento es móvil. Si esto no funciona, siempre queda el recurso de encerrar todo el gadget en un nuevo DIV con otro ID, tal y como hemos visto justo antes.

<div id='gadget1'>
CODIGO DEL GADGET
</div>
<script type='text/javascript'>new Draggable('gadget1');</script>

Ojo en todos los casos y en especial en este último con los enlaces. Si existe uno dentro del elemento móvil y pinchamos justo encima para moverlo, nada más soltar el botón del ratón, se realizará el acceso a la dirección del enlace. Por tanto, en un principio, los bloques móviles no deberían contener enlaces o estar muy claros para que no se pinchara en ellos para arrastrar. El truco que nos explican en Ciudad Blogger para solucionar esto es incluir un evento JavaScript en el elemento para poder abrir con doble click:

<img id="imagen1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL_ENLACE')" src="URL_IMAGEN"/>
<script type="text/javascript">new Draggable('imagen1');</script>

Las imágenes de los extremos abren el enlace que contienen sólo con doble click. Sin embargo en la del centro, hemos puesto el enlace en el círculo que forma el balón. Mientras no pinches ahí, puedes mover el dibujito sin problemas porque no se enlaza nada. Lo hemos hecho con USEMAP:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter