Hacer que las imágenes se arrastren (1)

14 de diciembre de 2009 118 comentarios ,
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>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</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 | Segunda parte


118 comentarios en:

" Hacer que las imágenes se arrastren (1) "

  1. Ers el mejor tienes una solucion para todo, que bueno soy el primero en comentar.

    ResponderEliminar
  2. Esta super bueno el truco si hasta me quede jugando con la imagen un rato... xD
    saludos

    ResponderEliminar
  3. Holaa!!
    Que bueno el truco! muchhas gracias
    ahora tengo unas preguntitas:
    ¿Se podria poner un enlace si pincharas dos veces?
    ¿Se podria hacer con texto? Si la respuesta es si, se podria poner un enlace en el texto?

    Siento darte tanta faena ;)

    Gracias de todos modos:)
    Saludos!

    ResponderEliminar
  4. Me encanto, estuvo perfecto este truco, creo k es uno de mis trucos favoritos...Muchas gracias por compartilro.
    Saludos!

    ResponderEliminar
  5. Entretenido e interesante, gracias.
    Un saludo

    ResponderEliminar
  6. Anti-Haker, gracias por tus comentarios, saludos!

    fabian, la verdad es que sí está muy entretenido =)

    Dj Nestor, sí, sí se puede hacer todo eso, en el siguiente post lo explicaré, saludos!

    PepeX, gracias a ti por tu visita, saludos.

    Gildo Kaldorana ¿verdad que sí? me alegro que te haya gustado, saludos.

    ResponderEliminar
  7. Wow Wow Wow !!! esto si que no lo conocía!! magnífico bro!!!! me hiciste acordar al scipt para Firefox que permite modificar las Webs!!!

    He movido el logo de Blogger y lo deje entre los anuncios, para que el próximo que lo quiera arrastrar se equivoque y de un clic! JAJAJAJAJAJAJAJAJAJAJAJAJAJAJAJA!!! XD


    Un abrazo!!!

    ResponderEliminar
  8. Como siempre "Excelente".
    Voy a pensar en que puedo sacar provecho.

    Saludos Potro.
    Jpz.-

    ResponderEliminar
  9. OK Muchas gracias, y podrias poner tambien en el post (si se puede ) Que cuando se mene una imagen peranezca aunque se recargue o se salga de la pagina, y al volver tenerla donde estaba.
    Y el colmo de esto seria= Un boton de reset jaja!!

    Saludoos!

    ResponderEliminar
  10. brother, jajajaja, para nuestra mala suerte la imagen no se queda ahí para el próximo usuario, sino sería genial. Un abrazo!

    Jpz, en algo quedará bien, a ver si con el próximo post te inspiras más. Saludos!

    Dj Nestor, no creo que sea posible que la imagen quede en el lugar donde la moviste por última vez, al menos yo no lo sé hacer. Saludos.

    ResponderEliminar
  11. Jajajajajajajaja...so lo se, aunque tengo que reconocer que lo primero que se me vino a la mente luego de recargar la página era como diablos hacer un scipt "con memoria" para que quede donde lo dejaba!! jaajjajajajajajajajajajajajaja!!!!

    No me quites las ilusiones así bro.. al menos dejame soñar que somos millonarios gracias a AdSense! XD


    Un abrazo!

    ResponderEliminar
  12. lo de numerar las imagenes con drag1,2,3 es solo en una entrada o cuerpo html o en todo el blog?

    ResponderEliminar
  13. brother, cuando seas ingeniero serás millonario, qué te preocupa, jaja, un abrazo!

    Joel, es donde lo pongas, cada vez que lo pongas tienes que asignarle una nueva ID, la que tú quieras. Ya sea en una entrada, en la sidebar, etc. Saludos.

    ResponderEliminar
  14. Uhhhh.... ojolá así sea!! Lo primero que haré será comprar Google AdSense y cambiaré sus políticas para que diga "Los clics realizados en CiudadBlogger serán pagados como mínimo 100 dólares cada uno" XD

    Un abrazo!!!

    ResponderEliminar
  15. Esto está muy bien. ¿Hay algo similar para JQuery?

    ResponderEliminar
  16. Gracias potro
    muy bien hecho, lo estuve buscando para una web pero
    pues me canse y ahora veo que tu lo publicas gracias
    y pues espero colocarlo en breve GRACIAS

    ResponderEliminar
  17. brother, con que paguen ya es más que suficiente XD

    José GDF, sí, usando EasyDrag de JQuery puedes tener los mismos resultados.

    Alex, me alegro que lo hayas encontrado!

    ResponderEliminar
  18. No puedo ver el ejemplo, alguna recomendación, voy a tratar de recargar la página...

    ResponderEliminar
  19. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  20. hE ENCONTRADO TU BLOG DE CASUALIDAD HACE POCO Y YA ES DE MIS PREFERIDOS.
    tengo una pregunta, haber si tu saber como hacer.
    mi blog es : http://www.pontenova.es/
    Sale una flecha naranja al lado de cada entrada que quiero eliminar. ha buscado mucho, le he pedido ayuda al escaparate de rosa, a tuneando el blog y nada. d
    se cambian mas arriba, pero no la flecha. la quiero eliminar.
    muchas gracias.
    mi correo es pontenova.es@gmail.com

    ResponderEliminar
  21. Hay alguna forma de hacerlo con JQuery? Porque yo quiero mi gadget de seguidores...

    ResponderEliminar
  22. Hola PONTENOVA.ES,

    Entra en Diseño > Edición de HTML y busca esta parte:

    .post h3 {
    margin:0;
    line-height:1.5em;
    background:url("http://www.blogblog.com/rounders2/icon_arrow.gif") no-repeat 10px .5em;
    display:block;
    border:1px dotted #cccccc;
    border-width:0 1px 1px;
    padding:2px 14px 2px 29px;
    color: #cc0000;
    font: normal bold 195% 'Trebuchet MS',Verdana,Arial,Sans-serif;
    }

    Elimina lo que está en negrita y listo.
    Saludos!

    ResponderEliminar
  23. Ascesino96, sí, sí la hay, más adelante hago una entrada para explicarlo, saludos.

    El Venado, ojalá te quede muy bien, saludos!

    ResponderEliminar
  24. Realmente buenísimo potro, sin duda este es el mejor blog de ayuda para los usuarios de blogger que conozco, sin quitarles mención a los demás, tus aplicaciones, y herramientas son interesantes... me dan muchas ganas de hacer copy paste, jajaja saludos Man...

    ResponderEliminar
  25. Hola JULIO CESAR,

    Muchas gracias por tu comentario, me da gusto saber que el trabajo de este blog puede serte de ayuda para ti y para otros usuarios.

    Saludos!

    ResponderEliminar
  26. Genial esta divertido ese codigo
    gracias potro

    ResponderEliminar
  27. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  28. upss la borre oie potro tenia una dida como puedo centar un widget esque este se ve como que chueco
    http://unrealmat-pruebaz123.blogspot.com/
    Me gustaria que quedara centradito
    esa plantilla la pienso usar `para año nuevo :s Shhh!
    jeje
    aver si me echas una mano aver si te conectas alarato boeno ahora estoy en line Porfavos Potro te lo agadeceria mucho

    ResponderEliminar
  29. Hola ,

    Al código que tienes agrégale lo que está en negrita:

    <center><a href="http://www.unrealmat.com/2009/12/repeticion-wwe-tlc-2009-table-leadder.html"><img alt="twitter" src="http://i638.photobucket.com/albums/uu101/unrealmat/TLCpnglogo.png?t=1259432224"/><br/><b>Clic imagen = Repetición</b></a></center>

    Saludos.

    ResponderEliminar
  30. GRACIAS POTRO
    PERO NO ERA ESE :(
    MAS VIEN SERIA EL DE ACA
    http://unrealmat-pruebaz123.blogspot.com/
    SOLO QUERIA QUESE CENTRATA MIS SEÑALES Y MI XAT SINO LUEGO PLATICAMOS POR EL MSN PORQUE LA VERDAD ESTOY MEDIO WEY PARA EXPLICAR

    ResponderEliminar
  31. Es el mismo procedimiento, hay que encerrar los códigos entre <center> y </center>

    Saludos.

    ResponderEliminar
  32. mil millones de gracias. eres el puto amo. gracias a gente como tu podemos hacer genialidades.
    Enseguida te enlazo en mi blog
    gracias de nuevo.

    ResponderEliminar
  33. Por nada, me alegro haberte podido ayudar.

    Saludos y gracias por el enlace!

    ResponderEliminar
  34. Wah!!! Genialísimo este truco.
    ¿Es posible poner bordes (marco) a la imágenes arratrables?
    Mil gracias

    ResponderEliminar
  35. Claro ABRIL, en el segundo código verás esta parte:

    style="cursor:move; border:0px;"

    Cámbialo por esto:

    style="cursor:move; border:2px solid #000000;"

    Ahí he puesto un borde de 2px y un color negro pero tú puedes elegir el tamaño del borde, el color y el estilo.

    Saludos.

    ResponderEliminar
  36. Hola, ¿ es posible poner la imagen fuera de las entradas y sign siendo arrastrables ?

    tengo otra pregunta ojala que puedas ayudarme, tengo la frase de los comentarios que dice por ejemplo 1 comentario debajo de cada entradas de mi blog, pero quisiera mover esa palabra (1 comentario) fuera de una entrada se puede ?

    ya he visto a otro blogger que lo ha hecho.

    ResponderEliminar
  37. Hola Forrito,

    Puedes poner la imagen dentro de la sidebar, o bien, directamente en tu plantilla antes de </body>

    ¿A dónde quieres mover el link de los comentarios?

    Saludos.

    ResponderEliminar
  38. En la imagen muestro mi idea del link de los comentarios
    y los cuadrados en rojo marcados son la ubicacion de donde quisiera que vayan las imagenes arrastrables como lo explica tu entrada.

    img97.imageshack.us/img97/2401/dandyman20080829ss.jpg

    ResponderEliminar
  39. por ejemplo este codigo ya lo puse antes del body con esta imagen que quiero pero no me gusta el lugar donde se por defecto, quisiera subirlo mas arriba quiero cambiar la posision ayudame :) ?

    ResponderEliminar
  40. parece que no aparecio el codigo en mi comentario pero esta es la imagen que agrege al codigo que nos das arriba

    http://img64.imageshack.us/img64/3584/technorati64x64.png

    ya esta fura de las entradas pero ahora como lo subo mas arriba y centro a la derecha o izquierda.

    gracias

    ResponderEliminar
  41. Podrías intentar cambiarlo de lugar poniendo esto:
    .comment-link {
    position:absolute;
    left:-58px;
    }

    Aunque no le encuentro la razón para hacer arrastrable el link de los comentarios.
    La otra imagen que mencionas sigue esta explicación, sólo le agregas lo necesario para que se pueda mover la imagen:
    http://ciudadblogger.com/2009/03/poner-imagen-estatica-en-el-blog.html

    Saludos.

    ResponderEliminar
  42. disculpa, no logro entender aun soy novato en esto, uso la plantilla note pad chaos he buscado .comment-link { y no lo encuentro, talvez puedas ver el codigo de una plantilla notepad chaos y me ayudas un poco a ubicarme mejor porfavooooooooor.

    ResponderEliminar
  43. Si no lo tiene entonces agrégalo tal como lo he puesto.
    Saludos.

    ResponderEliminar
  44. abajo de que codigo lo pego.

    que codigo busco para pegarlo luego ?

    ResponderEliminar
  45. creo que me deje entender mal, no me refería que el link de comentarios sea arrastrable sino moverlo de su lugar a otra parte.

    En el fondo de mi blog tengo una imagen de un foco y quiero centrar el link de comentarios en el foco pero no puedo porque el link de comentarios va abajo.

    porfavor dame una mano con esto >.<

    ResponderEliminar
  46. Hola Forrito,

    Entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca este código:

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comments</a>

    Selecciónalo y sustitúyelo por esto:

    <a class='comment-link2' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/> Comentarios</a>

    Luego pega antes de ]]></b:skin> lo siguiente:

    .comment-link2 {
    position:absolute;
    top:340px;
    left:130px;
    }

    Eso es todo, en el último código puedes centrarlo a donde quieras.
    Saludos.

    ResponderEliminar
  47. Genial, y yo que pense que no tenias intencion de ayudarme te agradesco muchisimo y eso multiplicalo por mil gracias

    Me funciono todo bien, como podria cambiarle de color y aumentale el tamaño ?

    ResponderEliminar
  48. Al último código agrégale esto:

    color:#FF0000;
    font-size:24px;

    El primero es el color, lo puedes cambiar por el código del color que quieras. El segundo es el tamaño de la letra, también lo puedes cambiar.

    Saludos.

    ResponderEliminar
  49. perfecto mira que pasada XD

    http://joel-design.blogspot.com/2009/12/joeldesign-os-desea-feliz-navidad.html

    ResponderEliminar
  50. Muchas gracias por tu ayuda todo salio de ......

    gracias.


    Como uso este efecto de arrastrar pero fuera de las entradas quiero esparser algunas imagenes arrastrables pero no quiero agregarlas en una entrada o widget quisiera ubicarlas como imagenes flotantes.

    proto me podrias dar un ejemplo de este codigo arrastrable combinado con el codigo de imagenes flotantes para entender :) ?

    y en que lugar de mi plantilla note pad chaos lo pondria el codigo?

    ResponderEliminar
  51. derrepente no me entiendas yo me referia como por ejemplo en tu blog la flechas pequeñas de arriba o abajo A ESAS aparte que flotan agregarle el efecto rollover para que cuando pases el mause se haga mas grande

    efecto rollove + imagen flotante + LINK (vinculo )

    en mi caso quiero una imagen fija en una zona que no sea entrada ni widget + el efecto rollever espero tu consejo no se como combinarlos.

    muchas gracias.

    ResponderEliminar
  52. Joel, muy creativa tu tarjeta de Navidad ;)

    Forrito, si cambias de parecer a cada rato me va a costar más trabajo entenderte, en el comentario anterior decías que querías que algunas imágenes fueran arrastrables.

    Usa este código antes de </body>:

    <a href="URL del enlace"><img src="URL de la imagen" style='position:fixed; bottom:0; left:0;' onmouseover="this.width=300;this.height=100;" onmouseout="this.width=80;this.height=50;" width="80" height="50" /></a>

    Para saber cómo cambiar las dimensiones de la imagen visita el siguiente post:
    http://ciudadblogger.com/2009/09/agrandar-imagen-al-pasar-el-mouse-ii.html

    ResponderEliminar
  53. Vaya no me dejo entender bien, disculpa tratare mostrándote la diferencia de los blogs para que pueda ser entendible mi idea.

    este blog es mio
    http://forripruebas.blogspot.com/

    este blog es de Oloman el ganador del concurso diseño blog 2009.
    http://oloblogger.blogspot.com/

    No estoy tratando de copiarlo solo lo hago casi igual
    para que puedas entenderme mejor.

    El tiene en la parte derecha superior dos botones uno es de su FEED y otro para seguirlo en TWITTER, al parecer para mi yo creo creo que esta usando los efectos de rollover para que cuando pase el mause brillen los botones y a eso le agrego una imagen desubicada fija.

    estas dos URLs son los tutoriales donde explica cada efecto pero por separado

    http://oloblogger.blogspot.com/2009/03/position-imagenes-fijas-o-desubicadas-i.html?showComment=1257797992862#c1405064860770497901

    http://oloblogger.blogspot.com/2008/09/botones-en-movimiento-rollover.html?showComment=1260940247858_AIe9_BFAdwIeCwOTbj5fSNo7yqNIsclusGn7LqE0Vc7SRVe9TsFQAp9CCwK6yRvHbe3rSQhKVq-fOtdB0UpbeaZv3n7Wtmvo6kaO-XE47vViRpBRofVBWzRiX1N33JiSLVITh6RR7p_G0EGEwsyR5QXoGoljxqtArzcEW4b27eDS2BfsmUwX9RH-hXA3SYwk8mMqFMgqeEfKAxRaEOZ2bf8_fWkZ-HPVWCJQ9iaBkloSZgCpMePl9aM#c2689188463399007520

    En resumen ---------------------------------------

    quiero tener los mismos efectos que uso el para que se suscriban a su TWITTER solo que con otra imagen y en otra parte y que pueda ser arrastable .

    ResponderEliminar
  54. Hola Forrito,

    Nuevamente antes de </body> pega lo siguiente:

    <a href="URL del enlace"><img style='position:fixed; bottom:0; left:0;' src="URL de la imagen UNO" onmouseover="this.src='URL de la imagen DOS';" onmouseout="this.src='URL de la imagen UNO';"/></a>

    Cambia las URL de las imágenes y del enlace donde se indica.
    Para conocer más del tema visita este post.

    Saludos.

    ResponderEliminar
  55. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  56. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  57. he tenido preguntas disculpa que las haya eliminado, ya las he resuelto.

    aun tengo dos dudas

    Como hago una imagen arrastrable que este ubicada fuera de un widget o una entrada ?

    porque quisiera ubicarla en esta zona del navegador y sea arrastrable

    width:100px;
    height:100px;

    - si la respuesta es que pegue el codigo en el HTML
    entonces en que lugar entre que secciones lo pego O_O ?

    postada no me referia a que si lo muevo y actualizara la pagina siga en su mismo lugar, no. :)

    _______________________________________________________

    hace unos dias me ayudaste a mover el link de comentarios
    a la zona que quiera, el problema fue que parece que se movieron de todas las entradas en un lugar y yo me referia a que el link de comentarios de cada una de las entradas por separado.

    Como el blog de Oloblogger.

    Gracias por tu proxima respuesta.

    ResponderEliminar
  58. Hola Forrito,

    Aunque eliminaste los comentarios pude leerlos en el correo.
    Lamento tardar a veces en responder los comentarios, pero debes saber que además de tener este blog también tengo una vida personal que debo atender.

    Te he dado varios códigos y enlaces donde se encuentra la información detallada de cómo hacer lo que quieres.
    Mi responsabilidad hacia con el blog, es crear los tutoriales y publicarlos para que estén al alcance de todos y de la manera más entendible posible, pero no puedo hacer el trabajo que al usuario le corresponde.

    En los enlaces que te de facilitado está la información que buscas, siento no poder hacer nada más para ayudarte.

    Saludos.

    ResponderEliminar
  59. entiendo u.u y no te podria pagar $ ? para recibir tu ayuda ? y terminar mi blog porfin.

    ResponderEliminar
  60. No Forrito, como te dije, yo sólo hago tutoriales.

    Saludos.

    ResponderEliminar
  61. yo entiendo creeme pero tambien creeme a mi que tampoco es facil rogar ayuda pero lo pido porque mi blog es importante para mi, quisiera terminarlo, llevo dias madrugando, se que no es tu obligacion ni te incumbe pero porfavor ayudame mi blog http://forritow.blogspot.com/ quiero borrarle del fondo los ojos al MUÑECO amarillo (BART)y agregar dos puntos arrastrables que empiezen desde ahi para que pueda ser interacitva su mirada y todos la puedan mover.

    gracias u.u

    ResponderEliminar
  62. Hola Forrito,

    No creas que me rehúso a ayudarte, por el contrario, mi intención con este blog es ayudar, así que me he hecho un espacio para apoyarte con los ojos arrastrables.

    Cambia la imagen que tienes de fondo por esta:
    http://dl.dropbox.com/u/647003/bg_body%20%282%29.PNG

    Luego pega antes de </head> el primer código que menciono en este post.

    Por último busca la etiqueta <body> y debajo de ella pega esto:

    <img id='ojo1' src='http://i50.tinypic.com/xnhp4l.png' style='cursor:move; border:0px; position:absolute; top:50px; left:510px;'/>
    <script type='text/javascript'>new Draggable(&#39;ojo1&#39;);</script>

    <img id='ojo2' src='http://i50.tinypic.com/xnhp4l.png' style='cursor:move; border:0px; position:absolute; top:50px; left:360px;'/>
    <script type='text/javascript'>new Draggable(&#39;ojo2&#39;);</script>

    Y listo, los ojos del muñeco se podrán arrastrar.
    La imagen de fondo que te he dado súbela a Imageshack lo antes posible pues caduca en 12 horas.

    Saludos.

    ResponderEliminar
  63. Grasias !!! heee ! gracias Potro estoy saltando en un pie de la alegria pero pero U_U me caí cuando me di cuenta que funciona en IE y no en Chrome, ¿talvez habria una forma que funcione en los dos navegadores ?

    http://img132.imageshack.us/img132/9903/dibujotxz.jpg

    blog de pruebas http://dsadssdsadsa.blogspot.com/

    veras yo voy a contratar la voz que doblo en mexico a Homero Simpsons para que de la bienvenida al blog pero no puedo hacerlo sin terminarlo.

    Otra cosa tambien importante en estos dias estoy viendo que varios blogs se estan saludando por navidad y hace ratos que me pica la mano por hacerlo y felicitarte pero a mi no me gustaria que me digan feliz navidad antes de la navidad :).

    oloblogger me dijo: Para dejar más espacio entre widgets:
    En la parte CSS, insertar...
    .widget-content {
    margin-bottom:10px;
    }

    Donde es el Css? y si derrepente lo viste a mis widgets de abajo de etiquetas estan a la mitad que hago u.u ?

    Leer más: http://oloblogger.blogspot.com/2009/12/tynt-para-controlar-la-copia-de-tus.html#comments#ixzz0aTNeDwMu
    Under Creative Commons License: Attribution Non-Commercial Share Alike

    Potro amigo saludos desde Perú.

    ResponderEliminar
  64. Esto le explique a Oloman pero no explica las cosas tan bien como tu y la paciencia que tienes es Fabulosa :)

    http://img63.imageshack.us/img63/923/dibujo5wb.jpg

    porcierto no comentes a Oloman que algunas secciones se parecen a su blog le pregunte si podia hacerlo me dijo si pero cuando hablo con el soy Anonimo. :D

    ResponderEliminar
  65. mi ultima pregunta era poner una imagen como lo hace Oloman
    pero con la mia.
    http://i180.photobucket.com/albums/x16/brian-tk/estrella.gif

    asi

    http://img707.imageshack.us/img707/93/21875734.jpg

    intente esto pero no se donde ubicar cada Cosa y se me hace complicado.

    http://img198.imageshack.us/img198/6213/dibujohjg.jpg

    ResponderEliminar
  66. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  67. El arrastre "No me funciona con Mozilla Firefox" ¿Puedes resolverlo? Aguardo impaciente la respuesta, si lo deseas puedes enviármela a econenos@hotmail.com. Disculpas por incordiar.¡Feliz Año!. Un saludo. MaCaPe.

    ResponderEliminar
  68. Hola MaCaPe,

    El arrastre debe funcionar con todos los navegadores, yo lo he probado con cinco distintos y en todos ha funcionado.
    Revisa que no sea la versión de tu navegador y/o que los códigos estén colocados correctamente.

    Saludos y feliz inicio de año.

    ResponderEliminar
  69. Muchas gracias por la prontitud,la versión es 3.5
    Hice otra prueba sólo con imágenes, eliminé una tabla por si intercedía en el código, pero no me funciona, será por algo que interfiere con el Scriptaculous,sólo son suposiciones,lamento que no poder utilizarlo,me gustaba ese código. Gracias mil MaCaPe.

    ResponderEliminar
  70. Podría ser posible que sea que algo está interfiriendo con Scriptaculous. No estaría mal que lo hicieras en un blog de pruebas, así te darías cuenta si es por algún otro código que interfiere.

    Saludos.

    ResponderEliminar
  71. Efectivamente eso es, utilizo la misma plantilla en "Econenos naturaleza" y en esa no me dá error, en la de "Econenos continúa con error". Le miraré "las tripas" por si localizo el fallo. Un saludo y muchísimas gracias, si no lo consigo publicaré mis nuevos proyectos en otra plantilla y la enlazaré. Macape. Eres genial

    ResponderEliminar
  72. Ojalá encuentres el problema y se pueda solucionar. Si te decides por redireccionar el blog te dejo el enlace para hacerlo de manera sencilla:

    Redireccionar un blog a otro blog

    Saludos.

    ResponderEliminar
  73. Hola potro, creo que dí con el error , pues se repite en las plantillas de los blogs que no me permiten realizar arrastres, en: econenos con el buscador Mozilla Firefox se aprecia en la cima del blog esta flecha -->( no sé si es en Middlebar o Linkbar). Yo no la encuentro para eliminarla, tal vez tu sepas por donde anda, en caso contrario, no te preocupes, no pierdas tiempo en ello, buscaré otra solución.Muchas gracias, un saludo. MaCaPe.

    ResponderEliminar
  74. Hola MaCaPe,

    No creo que ese sea el problema, esa flechita es de un comentario de la plantilla que debe estar "suelto". A mí me ha pasado algunas veces en unas plantillas y me vuelve loco porque me cuesta mucho trabajo encontrar dónde está el error.

    Ojalá des con él y ten cuidado, no vayas eliminar algo.
    Saludos.

    ResponderEliminar
  75. Hola Potro: ¡Por fin lo encontré! Después de unas cuantas horas de copiar y pegar enlaces y demás "achinfánfanos" y antes de hacer el cambio de plantilla (tal vez tuviese que repetir de nuevo copia-pega), añadí la hoja de estilos del menú y de nuevo deja de funcionar, "el último elemento que miré",lo eliminé y tu código funciona a la perfección. Ayer suprimí directorios por un instante para comprobar fallo, las veces que aparece econenos disminuyó mucho, no sé si eso es significativo, controlo muy poco lo de ( popularidad y redes sociales,.. añadir metas...)Muchas gracias de nuevo, te invitaría a unos choricillos y un vino casero,..."Te mereces muchas cervecitas"

    ResponderEliminar
  76. Hola MaCaPe,

    Ya no entendí muy bien ¿el fallo estaba en los directorios?
    Si es así entonces debía ser alguno que usara un script, pero no hay problema, el que quites los directorios de tu blog no afecta en nada la popularidad de tu blog. Simplemente hay días buenos y otros no tanto, así es esto de las visitas en un blog.
    Pero me alegro que ya hayas resuelto el problema, yo por mi parte agregaré la palabra achinfánfanos a mi diccionario ;)

    Un abrazo!

    ResponderEliminar
  77. Hola Potro:
    El error lo producía el código css del "Menú". Ahora lo dejé sin él. La palabra "achinfánfanos", no creo que la encuentres en el diccionario, la uilicé para nombrar: cubos y otros recipientes para trasportar agua en una entrada del blog, así que si buscas esa pabra exraña sólo sale en uno de los blogs, esa enrada está en gallego: "Carrexando auga" y aquí la menciono"María, que así se chamaba, era unha cativa de catro anos, tódolos días carrexaba a auga dende a fonte ata a casa, tiña que encher tódolos achinfánfanos que estaban valeiros: cántaros, palanganas, baldes....día tras día controlaba que todo estivese cheo. Non era fácil, o camiño ata fonte pronto o facía, pero a volta era algo máis penosa. Poñia os baldes no caño da fonte, unha vez cheos, baixaba primeiro un e despois o outro, con tino para non verter a auga.", por eso no creo que e sea útil. Un saludo. Macape

    ResponderEliminar
  78. Hola El Potro
    Navegando me topé con una gran isla de scriptaculos:
    http://wiki.github.com/madrobby/scriptaculous/
    Esta bien interesante y es open source ¿la conoces? ¿son aplicables a blogger? Agradecería mucho tu apreciación sobre esto.
    Gracias

    ResponderEliminar
  79. Hola ABRIL,

    Interesantes efectos, ya había visto algunos pero no todos.
    Supongo que también pueden aplicarse en Blogger; la próxima semana hago los "experimentos" para ver si sale.

    Gracias por compartirlo.
    Saludos!

    ResponderEliminar
  80. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  81. ya lo probe y no me funciona, porque sera?

    ResponderEliminar
  82. Porque usas JQuery, esa librería no es compatible con Scriptaculous, por eso no funciona.

    Saludos.

    ResponderEliminar
  83. hola , una consulta: (aun que no lo creas mientras me disponia hacerte la pregunta encontre la solucion) ni pregunta te la hare para aquellos que le pse lo mismo:

    ¿porque mi imagen se arrastra pero al soltarla regresa donde mismo?

    el problema estaba en que copie tu link y utilice la misma url de la florecita que tienes mas arriba y no le quite el "drag 1" ...
    luego pues le cambie el "drag" por otra palabra y solucionado.... sera que es porque como es la misma url de tu ejemplo no se puede usar la palabra "drag 1" porque ya esta usada para esa url de imagen... posiblemente

    ResponderEliminar
  84. gracias por este gran blog... aun mis blog estan en fase de pruebas por eso no tengo contenidos... jejejeje cuando ya tenga todos lo que usare empezare a publicar espero mas te tus super post...

    ResponderEliminar
  85. Hola nEjO,

    La URL no tendría nada que ver, pero sí la palabra ID, en este caso drag1, aunque claro, si se usan varias imágenes sería mejor que cada una tuviera su propia URL y por supuesto su ID exclusiva.

    Qué bueno que tú mismo pudiste encontrar la solución :)
    Saludos!

    ResponderEliminar
  86. HOLA POTRO VEO QUE USTED ES EL MEJOR DE AQUI QUISIERA QUE ME AYUDARA CON UNA INQUIETUD QUE TENGO

    MIRA QUIERO UNA IMAGEN QUE SE VALLA BAJANDO EN LA PAGINA CADA QUE BAJAN LA PAGINA ES COMO UN TIPO BANERS

    ResponderEliminar
  87. MI CORREO ES cesarsaenzhdez@msn.com por favo0r ayudame

    ResponderEliminar
  88. En estos días publico una entrada para explicar cómo hacerlo.
    Te sugiero que te suscribas al feed para que estés enterado cuando se publique la entrada.

    Saludos.

    ResponderEliminar
  89. CREO QUE A DE SE LO MISMO QUE SE HACE CON EL LOGO DE FACEBOOK O TWITER http://ciudadblogger.com/2009/11/boton-para-compartir-por-twitter-y.html O EL DE IMAGEN FLOTANTE QUE SE CIERRA O QUE NO SE CIERRA... CREO QUE HABI PODRIA ESTAR LA RESPUESTA

    ResponderEliminar
  90. No entiendo la relación de arrastrar las imágenes con los botones de compartir (?)

    ResponderEliminar
  91. muy buen truco potro como siempre 10/10
    lastima que yo uso opera y en este navegador no va el efecto :(
    yo creo que lo pondre para mis dos lectores :D

    ResponderEliminar
  92. Es una lástima, pero igual podrías tratar con JQuery en caso de que no uses Scriptaculous.

    Saludos.

    ResponderEliminar
  93. muchas gracias potro como siempre al pendiente de los comentarios de tu blog :)

    y pos no creo, por que tengo scriptaculous en muchas cosas :(

    ResponderEliminar
  94. Ni hablar, ojalá que los demás truquillos que veas con Scriptaculous funcionen sin problema en Opera.

    Saludos!

    ResponderEliminar
  95. Oye en mi blog quiero poner easydrag pero no se puede
    como phototype y todo el codigo blabla bla los codigos en la simagenes y todo eso pero no salen las imagenes para moverlas me aparece haci

    draglink1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('')" src="http://img155.imageshack.us/img155/8971/he1.png"/>

    ResponderEliminar
  96. Easydrag es con jQuery no con Scriptaculous.

    Generalmente las funcionas Javascript (como el ondblClick) no funcionan directo en la plantilla, tienes que ponerlo en un elemento HTML/Javascript o una entrada.

    ResponderEliminar
  97. Hola tengo una preguntota, espero y me puedas ayudar como haces para que una pagina estaica quede sin nada es decir fuera cabecera sidebar etc. asi como la que usaste en EasyDrag

    ResponderEliminar
  98. El ejemplo como es una plantilla antigua usé este método:
    http://ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

    Pero si usas una plantilla del Diseñador de Blogger entonces debes seguir este método:
    http://ciudadblogger.com/2010/10/ocultar-sidebar-en-las-paginas.html

    En cualquiera de los dos casos puedes añadir ahí mismo estilos para que otras áreas de la plantilla desaparezcan como la cabecera, el footer, etc.

    Es basicamente lo que haríamos para ocultar elementos en distintas partes del blog:
    http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

    ResponderEliminar
  99. tio eres un crack, tendras algun efecto para en formularios seleccionar imagenes

    ResponderEliminar
  100. que tal estimado...todo bien te pasaste...pero mi consulta es la siguiente ¿ como guardar los cambios de los movimientos hechos

    ResponderEliminar
  101. Hola mi estimado nose si sigues por ahi, bueno queria preguntarte como hago para usar una imagen al darle click se posicione en un lugar especifico que yo quiera. haber es que quiero hacer algo asi como el test de raven http://www.avlisad.com.ar/test/index.php pero ya no con los radio buton sino directamente darle click a la imagen que se posicione en el lugar vacio y luego se vaya a la pagina siguiente, espero me puedas ayudar saludos.

    ResponderEliminar
    Respuestas
    1. No sé bien cómo se haría de una manera compleja, pero algo sencillo sería de este modo:

      <label for="test1">
      <img src="URL de la imagen" />
      <input class="select_control" id="test1" name="test" type="radio" value="value1" />
      </label>


      <label for="test2">
      <img src="URL de la imagen" />
      <input class="select_control" id="test2" name="test" type="radio" value="value2" />
      </label>

      Eliminar
  102. hola, acabo de dar con tu tutorial y era lo que buscaba, solo tengo una cosa, que ya tenía un efecto a parte y la onda de que este lo jale de google (google.load) genera que ya no me sirva mi otro plug in de jquery, si le quito google funciona todo lo demás, hay alguna manera para poder hacerlo funcionar ?

    ResponderEliminar
  103. Hola, he encontrado este tutorial que me ha quedado súper para lo que quiero, solo tengo un problema, este funciona jalando de google (google.load) y otras cosas que tenía funcionando con jquery han dejado de funcionar, solo quitando el google, funcionan todas, y pues menos esta, hay alguna manera de solucionar esto?

    ResponderEliminar
    Respuestas
    1. Hola Rodrigo, si también usas jQuery entonces debes hacer unos ajustes a tu script de jQuery para que sea compatible con este:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  104. Gracias Potro, ya me había dado por vencida, pero tu si que tienes todos los trucos necesarios, funciona perfecto.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger