Mover imágenes y otros elementos. Scriptaculous. | Oloblogger Este es otro motivo por el que sigo prefiriendo que no se vea el gadget de seguidores, antes que qui...

28 de diciembre de 2009

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
Copy URL

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

follow us in feedly

49 comentarios :

  1. Feliz 2010...muchas gracias por todos los problemas que he podido resolver gracias a tus enseñanzas.
    Un saludo y disfruta de lo que queda de fiestas .

    ResponderEliminar
  2. No le veo mucho la utilidad, pero me ha sorprendido, no sabía que se podía hacer.

    ResponderEliminar
  3. Esta muy bueno este truco, aunke concuerdo con Medecrece xq lo le veo mucha ultilidad tampoco.

    ResponderEliminar
  4. Gracias Eurice.

    Medecrece y Miguel Angel, las cosas son útiles sólo cuando tú tienes la necesidad que solventan. Un jersey de lana en verano es realmente inútil, pero espera a que llegue el invierno ;)

    Lo que quiero decir es que existen muchas cosas que se pueden construir con código, pero no tenemos por qué aplicarlas todas. Sólo las que nos hacen falta. Personalmente, me hubiera venido muy bien conocer este truco hace como un año. En esas fechas, tuve que solucionar eso mismo con un script muy farragoso.

    Saludos.

    ResponderEliminar
  5. Me encanta! me sucede igual... tengo la librería antes de tener el gadget de seguidores. Ahora estaba trabajando en la manera de que mis visitas pudieran escuchar o ver los videos de música que pongo en mis entradas (Eschando: -) y las cuales tengo todas reunidas en un widget al final del blog para quien quiera acceder a ellas más fácilmente, en lugar de tener que moverse por las entradas. utilicé una ventana modal de floatbox... sin embargo quería que la ventana no apareciera en el centro. Sino en un lugar que no molestara para seguir visitando el blog. Asi que ahora aprovecharé para hacerlo (al menos por el momento, jeje) con este truco y quien quiera mueva la ventana!!!

    un saludo :)

    ResponderEliminar
  6. ¡Muy buenas Uve!
    No sé si este truco te servirá para lo que quieres, pero con intentarlo nada se pierde.

    Un saludazo.

    ResponderEliminar
  7. Amigo Oloman,

    Voy a interrumpir tu descanso por estas Fiestas, haciéndote una pregunta. En mi última ENTRADA he puesto seis vídeos del YouTube con el Oratorio de Navidad de BACH, una música muy apropiada para estos días.

    ¿Podrías decirme si existe alguna forma de que se reproduzcan los seis vídeos de forma seguida, sin tener que darle al PLAY en cada uno?

    Te estaré muy agradecido y te deseo que sigas disfrutando de estos días tan entrañables.

    Si no te ha tocado la Lotería de Navidad, no pierdas la Esperanza, que todavía queda la del NIÑO.

    Un abrazo,

    Antonio

    ResponderEliminar
  8. Hola Oloman... he buscado por tu página a ver si encontraba mi solución pero creo q soy un poco "berzotas"... te explico, me he cambiado la plantilla, me he puesto una del tipo "fotolog" de esta forma se me ven las imágenes y abajo el título del post... mi intención es que cuando clicas a la imagen o al título se muestre el post... peeerooo, tengo un problema, que si ticas al título aparece el post, pero si ticas a la imagen no aparece absolutamente nada de nada... ¿Cómo puedo arreglarlo???

    Graciasss!!!

    Te dejo la dire xa q veas tu mismo lo q pasa:

    www.loquedijoelbarquero.blogspot.com

    GRACIASSS Y FELIZ NAVIDAD!!!

    ResponderEliminar
  9. No Antonio. Hay una manera de hacer que el vídeo se arranque al cargar la página, pero si se pone así, todos arrancarán al mismo tiempo. Supongo que se podría hacer algún script para ello, pero se me ocurre otra cosa con menos trabajo. Si lo que te interesa es la música y puedes prescindir de la imagen, busca cualquier gadget con reproductor que incluya la posibilidad de hacer listas de canciones. Algunos que recuerdo a bote pronto son playlist.com y radioblogclub.com, aunque seguro que hay muchos más... quizás incluso haya alguno que haga lo mismo pero con vídeos.

    Hola Encar. No tienes exactamente el mismo script que yo, pero como el funcionamiento es prácticamente el mismo, quizás puedas comprobar dónde está el problema viendo esta entrada en la que se explica cómo introducir imágenes con enlace en los resúmenes. El problema para mí es que veo el resultado del script, pero no los parámetros que se le mandan. Creo que el problema está en esto último.

    ResponderEliminar
  10. Oloman, quería desearte una Feliz Navidad cargada de felicidad y un magnífico año nuevo a tí y a los tuyos ^^.

    ¡Un gran abrazo!

    ResponderEliminar
  11. Yo he visto esta utilidad en acción en un post -no recuerdo la pagina- donde se trataba de explicar un efecto óptico.

    Hola, tengo una duda. He experimentado en mi plantilla gracias a tu blog, el de rosa y vagabundia sin saber mucho de html, scripts y esas cosas, sólo con paciencia y todo iba bien. Resulta que yo uso el Chrome y el Firefox y en estos mi blog se ve perfecto. Pero por curiosidad use el IE y me lanza un error, una ventana emergente anunciando que un .JS está mal.

    http://sednonsatiato.blogspot.com/

    ResponderEliminar
  12. Hola Jaime. Igualmente.

    Hola Pablo. Actualmente tengo IE8 y no he tenido ningún problema viendo tu página. De todas formas, si el error es con IE6, no te molestes en ver más, porque no merece la pena.

    ResponderEliminar
  13. hola oloman:
    pues perdon si te pregunto esto pero desde que conoci este blog me facino su template ¿me podrias decir su nombre?¿ o es especialmente echo para oloblogger.com?¿ aaaaa y otra pregunta donde puedo conseguir el contador automatico y todo lo que tiene este maravilloso blog.
    saludos y feliz año nuevo.oloman

    ResponderEliminar
  14. tReMenDiTooO, la plantilla en que está basado es la Notepad Chaos para Blogger, aunque tiene bastantes modificaciones sobre la original.

    Sobre los contadores, puedes echar un vistazo aquí y para lo demás, ya tendrás que ir navegando por el blog o si es algo más concreto, utilizar el buscador.

    Saludos y feliz año.

    ResponderEliminar
  15. muchas gracias oloman gracias por la informacion y no se si oloblogger podria patrosinar mi blog??¿¿ me encantaria.

    gracias. saludos.

    ResponderEliminar
  16. ¿Patrocinar tu blog? No sé que entiendes tú por patrocinar. Por aquí es subvencionar económicamente algo mediante una contrapartida publicitaria y si es eso, no estoy yo para ir pagando anuncios... más bien necesito lo contrario :D

    ResponderEliminar
  17. bno pssss digamos que apenas estoy aprendiendo en esto de los blog llevo apenas medio año yyy me falta experiencia (perdon) =S, pues como para que mas gente visite mi blog, se que no esta tan padre pero por lo menos para darle un pokito mas de publicidad?¿ Que me recomiendas. saludos

    ResponderEliminar
  18. ola de nuevo oloman ya coloque el contador en mi blog pero no sale como en tu blog (contador curioso) como le puedo hacer. grax.(si salen cuantas visitas pero no sale el muñeco animado que es el qe me guusto mas)

    saludos.

    ResponderEliminar
  19. Bueno, no sé que recomendarte yo llevo poco más de tres años y no entiendo mucho de promoción, porque de lo contrario, los blogs que tengo serían más conocidos. De momento, inscríbite en los directorios de blogs más conocidos... son los que ves en la mayoría de sitios que visitas, en forma de botón.

    Para lo de la imagen, escoge la que te guste y simplemente la colocas justo encima del código del contador con <img src="DIRECCION_IMAGEN"/>

    ResponderEliminar
  20. Hola, tengo un problema con este ejemplo

    Tengo una página que carga el contenido central en un div. Dentro de ese div quiero hacer el drag&drop y no me funciona, solo si lo hago con los divs principales. Cómo puedo solucionarlo?

    Gracias


    Bonito blog, si señor

    ResponderEliminar
  21. Hola Marta, no sé qué es lo que puede ocurrir, porque ahora mismo tienes puesto otro sistema para ello. Supongo que has encontrado una alternativa, pero si no es así, tendrías que dejar la prueba que no funciona para verlo.

    Un saludo.

    ResponderEliminar
  22. Gracias por contestar. Ya lo solucioné, al menos temporalmente :)

    En la página princial hago una llamada cada segundo al archivo js que contiene el drag&drop. Es un poco chapucero pero no supe de otra forma, se te ocurre como? Gracias

    ResponderEliminar
  23. Sigo en las mismas. La página que yo puedo ver tiene otro sistema distinto para abrir, mover y hasta cerrar tres bloques que presentas en tu portada.

    Y con respecto a las chapuzas, servidor es un experto :D

    ResponderEliminar
  24. hola olomán, estoy buscando una solución para mi gadget DIRECTORIOS en http://libroscolgados.blogspot.com con scriptaculous. Lo intenté de mil maneras y NO ME FUNCIONA (como podrás ver). ¿Qué es lo que falla o interfiere con scriptaculous?

    ResponderEliminar
  25. Lara, tienes mucha tela metida en tu página y me cuesta mucho buscar en tu código fuente. De todas formas, por empezar por lo más sencillo, utiliza minúsculas para llamar a la ID de ese bloque, porque a otros usuarios ya les dió problemas usar mayúsculas.

    Esta aquí:
    <a href="#" onclick='Effect.toggle("Directorios"," appear "); return false'>
    <h2 class="title">[+/-]DIRECTORIOS</h2>
    </a><div id="Directorios" style="display: none;" align="center">

    Recuerda cambiarlo tanto en el enlace como en la definición del ID un poco después. Elimina también los espacios en blanco a ampos lados de APPEAR.

    Por último, tienes que esperar a que se cargue toda la página para que el script funcione.

    ResponderEliminar
  26. mil gracias olomáN, otra vez has dado en el clavo. FUNCIONA!!!

    ResponderEliminar
  27. Muchísimas gracias, me encantó la idea y la utilicé para hacer puzzles. Un saludo!

    ResponderEliminar
  28. Jejeje... Divertidos Sims Elvira

    ResponderEliminar
  29. No. No juego habitualmente. Los he probado, como hago con muchas cosas, pero ya tengo demasiados "asuntos" con los que engancharme que ocupan casi todo mi tiempo. Fíjate si los tengo probados que mi primer Sim fue el Simcity para Spectrum ;)

    ResponderEliminar
  30. Buf!! Jeje, yo casi ni había nacido... soy una simadicta más reciente!

    ResponderEliminar
  31. Tengo una duda Con Este Truco los visitantes veran La imagen donde yo la e puesto?
    por ejemplo en la parte del sidebar?

    o Como el lapiz que tienes?

    ResponderEliminar
  32. -º_Rzm_º- los visitantes verán primero la imagen justo dónde tú la pongas. Si mueves las del ejemplo y refrescas, verás que "vuelven a su sitio".

    ResponderEliminar
  33. Muy bueno este truco lo eh puesto y funciona de 10! el unico detalles es que me dejo de andar el gadget seguidores... disculpa si ya has respondido esta pregunta pero no la encontre. Hay alguna solcucion a esto? dese ya gracias!

    ResponderEliminar
  34. Ya resolvi el problema! encontre unos codigos y todo solucionado. Suerte!

    ResponderEliminar
  35. Hola Oloman,

    A mí no me funciona en mi blog principal, pero sí en mi blog de pruebas.
    ¿Tiene algo que ver que sea un blog privado?
    (Es un blog de aula, que el colegio no ha querido hacerlo público)

    Gracias de antemano

    ResponderEliminar
  36. Gorka, no creo que tenga nada que ver que sea privado. Más bien se debe tratar de que en el blog principal tienes algún otro script que interfiere con scriptaculous y que sin embargo no tienes en el de pruebas. Por ejemplo, jQuery.

    ResponderEliminar
  37. Gracias majo!!

    Pos ya miraré...

    Un saludo

    ResponderEliminar
  38. Casi los mismos años de tener este post, es el tiempo de estar alejado del medio bloggero...regresa el hijo pródigo:
    El Pecado...Traicionar a Blogger y adquirir domino en otros lares uropediatra-online.com funcionando desde hace un par de meses y trasladando contenido.
    El Arrepentimiento...No todo lo que te he aprendido, lo puedo implementar en la nueva plantilla (zohoosites).
    El Perdón...por ingrato y alejarme de amigos bloggeros como tu.
    Alguien comentó no verle utilidad a este truco.Esta equivocado, pues las posibilidades son infinitas y en diversos campos.
    En mi caso y es allí en donde te solicito me des una mano mas de las tantas que te he pedido.
    Como un enlace externo de ayuda para calcular los percentiles de crecimientos de los niños he creado una página html simple en dropbox que contiene una imagen en jpg (Tabla de percentiles) y me gustaría que la imagen png del punto rojo que esta debajo de la anterior, se pudiera arrastrar al punto calculado sobre la tabla. He implementado el truco tal y como lo explicas y no logro arrastrarlo. Me cambia el aspecto del cursor, pero luego aparece la imagen de el circulo tachado de imposibilidad y no la cambia de lugar. Seguí el enlace al inicio del post y coloqué los códigos que tiene el Potro (Son lo que están actualmente) y tampoco funciona. Quite un scrip para imprimir y tampoco.
    Cuando tengas un tiempito mira el código fuente aqui..
    https://dl.dropboxusercontent.com/u/32907018/Calculadoras%20M%C3%A9dicas/Percentiles/Calcular%20Percentil%20Edad-Peso-Ni%C3%B1a.html
    Un fuerte abrazo desde tierras lejanas.

    ResponderEliminar
    Respuestas
    1. Hombre, cuánto tiempo... Me cuesta recordar a todos los que habéis pasado alguna vez por aquí, pero lo de los ositos sí que lo recuerdo ;)

      He estado viendo tu Dropbox y copiando el código tal cual lo tienes a mí sí que me ha funcionado. Entiendo entonces que el problema está en el soporte, o sea, en Dropbox, y que posiblemente sólo es que se no ejecuta bien Scriptaculous allí. Prueba ese mismo código en tu nueva plataforma a ver si va. De lo contrario quizás te tengas que buscar otro sitio aunque sea sólo para esa página ¿conoces Blogger? ;)

      Eliminar
  39. Blogger? Me suena, Me suena...JaJaJa.
    Me lo temía, Dropbox no soporta scriptacolous y zohosites tampoco. Le busqué todos los sitios posibles entre el head por si el problema era de conflictos y no tiene conflictos, pues los otros js funcionan bien aún teniendo ese al lado. Me pasa lo mismo. Cambia el cursor para arrastrar... pero nada.
    Es una lastima, pues tenía en mi cabeza miles de planes con el truco. Si sabes de alguna otra librería que lo haga, te agradecería lo comentes o me escribas directo a mi correo; Pues en la plantilla que uso, me paso lo mismo con las ventanas emergentes y buscando logre que me funcionara ibox. Y los paneles de pestañas igual...me tuve que conformar con uno parecido, pero con ciertas limitaciones.
    Mil Gracias por tu pronta respuesta y en espera de buenas noticias.
    Un Sincero Abrazo.

    ResponderEliminar
    Respuestas
    1. En una búsqueda rápide encontré esto con jQuery: Draggable

      Eliminar
    2. ! EUREKA !...Lo logramos. Draggable fue la solución.
      Te confieso que medio mucho trabajo en un principio y estuve a punto de desistir y "Tirar la Toalla". Pues el ejemplo del enlace que pusiste solo tenia los estilos css en el head para el #draggable y entre el body los div y class. Y eso me enredó o lió un poco.
      Buscando me encontré este ejemplo de su uso:
      http://jquery-manual.blogspot.com/2013/02/ejemplo-de-draggable-jquery-ui.html
      En donde los css del head tienen un #contenedor y un #draggable (contenido)...o como dirías tu una alfombra y un tapete encima (Parecido a la explicación en este post). Y modifiqué esos estilos, haciendo uso de uno de mi post favoritos:
      http://www.oloblogger.com/2010/01/enmarcar-videos.html usando position. Y mejor no podía quedar, pues el punto o draggable que quería arrastrar en la tabla del contenedor no se sale de allí por mucho que lo intentes. Mira como quedó:
      https://dl.dropboxusercontent.com/u/32907018/Calculadoras%20M%C3%A9dicas/Percentiles/Tablas%20Percentiles/Ni%C3%B1os-EdadPeso.html
      Mi negativa a usar mi blog de blogger es que como el uso de esa tabla es para incrustarla como iframe en la nueva página. Quería una plantilla limpia y que no mostrara lo que tengo en blogger ( Barra de wibiya y otros tanto cacharritos) y de esa manera solo me ocuparía el espacio requerido. Si puedes pásate y mira tu obra:
      http://uropediatra-online.com/percentil-en-varones.html
      Te debo miles de "cañitas" o "frias", como decimos aquí. Las pondré desde ya a "congelar" para cuando se de la ocasión.
      Mil y MIL GRACIAS.

      Eliminar
    3. Luis eres un adulador. Yo sólo te di una dirección y tu condujiste todo el camino. De todas formas no sé si el día que pueda ir por tu país mi memoria alcanzará a acordarme de las frías porque probablemente estará senil ;)

      Y además contigo he aprendido que se pueden crear páginas HTML ejecutables desde DropBox. No tenía ni idea.

      Eliminar
  40. Hola Oloman Oloman! Gracias por compartir tus conocimientos!
    Por favor comparte un tutorial sobre como mover imágenes en el canvas con el click del mouse en lugar de arrastrar. Es decir, primero elijo una imagen con click, y después le doy click a donde quiero que se mueva.
    Saludos!

    ResponderEliminar
    Respuestas
    1. Lo siento Adrián, pero eso no lo he probado nunca. No sabría cómo hacerlo hoy día.

      Eliminar
  41. Hola, quisiera ayuda acerca de un codigo para comparacion de dos imagenes (como un antes y un despues). El ejemplo esta en esta web
    http://www.recreoviral.com/creatividad/transformaciones-antes-del-poder-maquillaje/

    ResponderEliminar
    Respuestas
    1. Aquí tienes un sistema sólo con CSS y aquí otro que usa JavaScript (jQuery)

      Eliminar