Arrastrar imágenes con JQuery

5 de mayo de 2010 56 comentarios ,
Anteriormente vimos cómo arrastrar imágenes usando Scriptaculous y Prototype, sin embargo, quienes usan JQuery no pudieron implementarlo debido a que como muchos ya saben, esta librería no es compatible con Scriptaculous y Prototype.

Aun así, quienes usan JQuery también pueden tener el mismo efecto en las imágenes, es decir, pueden arrastrar las imágenes con un script que les permitirá moverlas de un lugar a otro dentro del blog.
Puedes ver un ejemplo en este blog de pruebas.

Para crear este efecto en las imágenes entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudad-blogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>


Ahora sólo usa este código cuando quieras que una imagen se arrastre:
<img id="easydrag1" src="URL de la imagen" style="border: 0px none; cursor: move;" />
<script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

Cambia la URL de la imagen donde se indica, y además, es importante que cada imagen tenga un ID único, en este ejemplo el ID se llama easeydrag1, ese ID debe ponerse dos veces donde se indica en color azul.

Si tuvieras otra imagen con este efecto entonces ponle un ID distinto a la otra imagen, por ejemplo easydrag2, de lo contrario no funcionará.

¿Y cómo hacer si queremos ponerle un link a la imagen?
Usaremos la misma técnica que usamos con las imágenes arrastrables con Scriptaculous y Prototype, es decir, le pondremos una función Javascript para que al dar doble click sobre ella se abra la página que quieras.
En ese caso el código que usarías sería este:
<img id="easydrag1" style="cursor:move; border:0px;" ondblClick="javascript:window.open('URL del enlace')" src="URL de la imagen" /><script type="text/javascript">
$(function(){ $("#easydrag1").easydrag();});
</script>

Con eso la imagen se podrá arrastrar sin problemas y podrá tener un vínculo activado al dar doble click sobre ella.

Como dije en un inicio, este método es para quienes usan JQuery, si usas Scriptaculous y Prototype entonces usa este otro método.

Te recomiendo que descargues los scripts y los alojes en la plantilla o bien, en tu propio servidor, si haces esto último sólo cambia lo que está en color verde por las URL de tus archivos.

Descargar | JQuery EasyDrag


56 comentarios en:

" Arrastrar imágenes con JQuery "

  1. ¡Que bién que sea el primero en comentar!

    Funciona de vicio, le he hecho un nano-blog a mi primita con esto y se lo pasa bomba.

    ¿Aunque que otras funciones podría tener? /:)

    ResponderEliminar
  2. Wow!! que interactivo!!! me puse a jugar como un niñito XD ... no me imagino como se divertirán los niños, con imágenes como ben10 y todo eso que ven ahora! Creo que les voy a armar algo interactivo para mis sobrinitas!

    Ahora entiendo algunas cosas. Cuando estaba buscando plantillas, algunas recomendaban no usar otras cosas con Scriptaculous y Prototype para que funcione lo de JQuery
    ¿o entendí mal?

    Gracias Bro!

    Un abrazo!!!

    ResponderEliminar
  3. Jajajajajajajajajajajajajajajajajajajajajajajajajajajajajajajajajajajaja mira que coincidencia!!!!! acabo de comentar... pensé que era el primero, pero mientras escribía, Drawer 4 Everyone dijo que hizo un blog para su primita del mismo modo que yo voy a hacer con mis sobrinitas!!! jajajaja.

    ResponderEliminar
  4. Hola Drawer 4 Everyone,

    Más que nada es para hacer el blog más interactivo, supongo que en blogs didácticos se le puede sacar más provecho.

    Saludos.

    ResponderEliminar
  5. Hola brother,

    No entendiste mal, si no eres tan despistado como crees, jajaja.
    Esas librerías no funcionan bien estando juntas, o mejor dicho, una de ellas deja de funcionar.

    Lo cierto es que Drawer 4 Everyone salió más rápido que cualquiera, mientras yo hacía el "ping" del post él ya había hecho el nano blog, jaja.

    Un abrazo!

    ResponderEliminar
  6. Muy interesante, pero ya tengo los Scriptaculous.

    Te queria preguntar acerca de los comentarios.

    Que harias tu, si cuando vas a responder los comentarios hay un anonimo, luego un nombre de usuario y luego otro anonimo.

    ¿Que se puede hacer para no confundir a los lectores.?

    ResponderEliminar
  7. Jajajajajajaja... pues pues... me fije pero no lo encontré... le diré que me pase la URL del nano blog para tener una idea.. (ya sabes que soy muy malo para el diseño jajajaja)

    Un abrazo!!!

    ResponderEliminar
  8. El Venado, lo que yo hacía cuando aceptaba comentarios anónimos era ponerles un número para referirme a ellos, por ejemplo, Anónimo1, bla, bla, bla. Ya sea por orden como comentaron, o por el número del comentario.

    bro, ya somos dos, llevo tres días tratando de hacer una plantilla pero todo lo que hago lo desecho porque no quedo conforme con el diseño :s

    ResponderEliminar
  9. Muy bueno para trabajar con los niños!
    Por ejemplo: un objeto y el nombre.

    Besos Sr. Potro :)

    ResponderEliminar
  10. Muy bueno Potro.

    Nuevamente con problemas yo :P no me funciona la cuenta de Dropbox y para mi que es en general por que acá en tu blog tampoco funcionan los archivos que tenes de Dropbox.

    Resp el mail cuando puedas.

    Abrazo!!!

    ResponderEliminar
  11. Graciela, excelente idea, con este tipo de cosas los pequeños son los que salen ganando :)

    ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜP๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜO๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜZ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜO+10™, debe ser tu conexión, tanto el enlace del archivo como el servidor de Dropbox está funcionando sin problemas.

    ResponderEliminar
  12. Gracias Potro...!!!
    Te comento una buena, hoy me salio funcionando el Shadowbox en internet Explorer 8, así que funciona en todos los navegadores, por que en todos los demas me funciona (Chrome, Firefox, Opera y Safari).

    saludos.!!!

    ResponderEliminar
  13. Tal como te dije, sí funciona ;)

    ResponderEliminar
  14. Hola Potro!! Vaya truco tras truco!! perdon x hacer este comment aca, pero he visto q tienes muchos menus que son excelentes, he visto uno que no he podido instalar en mi blog y quiero saber si podrias hacer alguna entrada referente a como poner este menu Rockin and Rolling Rounded Menu: http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/ Vaya que si es un menu que es sensacional, pero x más que intente no he podido instalarlo. Salu2, estare pendiente para colocarlo en mi blog
    http://transformersg.blogspot.com/
    "Cuando veas ese menu en funcionamiento, te gustara tanto como a mí"

    ResponderEliminar
  15. Muchas gracias por tus aportes (: saludos

    ResponderEliminar
  16. Rob X, pues sí, está muy chulo el menú. Deja hago unas pruebas para ver qué tal se desempeña en Blogger y si todo sale bien lo agrego a la lista de posts pendientes ;)

    Adm gracias a ti por tu visita :)

    ResponderEliminar
  17. Gracias por tu gran ayuda!...soy nueva en esto de los blogs y realmente me han servido mucho tus publicaciones. Quiero hacerte una pregunta ¿como puedo saber cual es la URL del Fedd del Sitio?

    http://armonizandotuvida.blogspot.com

    Saludos.

    ResponderEliminar
  18. En el caso de los blogs de Blogger la dirección del feed es esta:

    http://tublog.blogspot.com/feeds/posts/default

    Sólo cambia donde dice tublog y tendrás la URL de tu feed.
    En tu caso sería:

    http://armonizandotuvida.blogspot.com/feeds/posts/default

    Saludos.

    ResponderEliminar
  19. Muchisimas gracias por tu ayuda!!!
    Saludos

    ResponderEliminar
  20. Hola My Potro que haciendo.
    Yo aqui regresando al mejor blog de Blogger
    y pues topando con este exelente Post la verdad eres la Riata :)---
    Pero me Surgio Una duda esperando me Ayudes
    Como Puedo poner los Botones de Segumiento es decir tu tienes algunos Pekeños botoncitos abajo de cada entrada para compartir por Twitter FaceBok e-mail Myspace añadir a marcadores.
    Porque no le dices ala bando como lo ahces:)

    ResponderEliminar
  21. Hola My Potro que haciendo.
    Yo aqui regresando al mejor blog de Blogger
    y pues topando con este exelente Post la verdad eres la Riata :)---
    Pero me Surgio Una duda esperando me Ayudes
    Como Puedo poner los Botones de Segumiento es decir tu tienes algunos Pekeños botoncitos abajo de cada entrada para compartir por Twitter FaceBok e-mail Myspace añadir a marcadores.
    Porque no le dices ala bando como lo ahces:)

    ResponderEliminar
  22. Hoy ando con Muchas Dudas xD
    Como podemos poner alguna animacion Flash en la cabecera en ligar de una imagen Mira aqui un ejemplo de una pagina de Intenet y aver si se puede en Blogger http://ska-p.com/index.php Me gustaria Mucho dar un pazo Grande a esta tecnologia a muchos Bloggeros alomejor tambien...

    ResponderEliminar
  23. Estabas coleccionando las preguntas eh! jaja
    Los iconos para compartir (marcadores sociales) están aquí.

    Para poner una cabecera en flash mira esta otra entrada.

    Saludos.

    ResponderEliminar
  24. genial potro, genial!!! felicidades por el blog, siempre creciendo... 700 seguidores... no es poco potro!!!

    ResponderEliminar
  25. Uff sin duda espectacular ya vi los 2 post pero aun tengo mis dudas es facil hacer esas animaciones Interactivas? es decir asi como la pagina que te enseñe donde acercas el puntero y cambia la imagen eh incluso hay unas animaciones donde inclusO tienen sonido tal es el caso como las paginas para niños como la de Nick o DiscoveryKids
    Mi pregunta es... Deverias ser un experto al Utlizar el programa de FlasH o pueden aver tutoriales donde me puedan a enseñar a diseñar con flash.

    OJALA ME PUEDAS AYUDA POTRO MUCHAS GRACIAS, SI CONOCES DE ALGUNA PAGINA [CON DETALLES] O ALGUN VIDEO HAZMELO SABER.
    GRACIAS!

    ResponderEliminar
  26. Joaco, gracias, igual veo que vas cada vez mejor :)

    ıllıllı★Criss Mitchell★ıllıllı, debería ser experto en flash...quizá, también debería ser millonario, pero no creo que ninguna de las dos cosas suceda pronto. El único sitio que conozco de tutos de flash es Trucos Flash, quizá ahí tengan algo parecido a lo que estás buscando ;)

    ResponderEliminar
  27. como a las 6:15 hora del centro de México se cayo Dropbox dejaron de funcionar las URLS ME DI cuenta por que me dijo u amigo y corri a cambiarlo de Hosting y regreso todo como a las 6:20hora del centro de México, y pues estaba bien preocupado

    ResponderEliminar
  28. ya me gane un lector mas jajaja

    ResponderEliminar
  29. Alex, sucede en todos los servicios gratuitos, ya sea que hagan trabajos de mantenimiento o que por alguna razón se caiga su servidor, pero sólo es esperar y ya, no pasa nada ;)

    PepeX, siempre que me preguntan por cosas de flash los mando contigo, ahí tú eres el experto :)

    ResponderEliminar
  30. oye potro quisiera ver si me ayudas en algo.

    lo que pasa es que al hacer u7na entrada para mi blog las imagenes salen cortadas y quisiera saber como hacer para que se adapten al tamaño de las entradas del blog.

    este es el link para que lo checkes: http://juegos-3ds.blogspot.com/

    de antemano, gracias.

    ResponderEliminar
  31. Hola.!!! Qué tal Potro???

    Ando buscando algo que no se si sabrás y si se puede hacer :P jajajaja.
    Lo que necesito es algún código para que no puedan guardar una imagen de este modo, tomo de ejemplo tu cabecera, http://lh5.ggpht.com/_qgZA1ny_dAs/Su71HlpkJZI/AAAAAAAAC3s/vHhjqVJRN_4/logociudad-trans-border.PNG esa imagen como le deshabilitar el clic y que no la arrastren, se podrá??? :P

    ResponderEliminar
  32. cyberbloggero, me hicieron borralo, ¡se cansaron a los tres días, así que ya no se que puedo hacer para ayudarte, aunque la plantilla que usé se llama Clear, y puse una r de imágen de hello kitty, cinco o seis de Ben 10 y (no te lo pierdas) ¡14 de algo llamado Código Layoko o lioko o yo que se qué!

    Enlace a la plantilla:
    Link

    ResponderEliminar
  33. Alberto, si las imágenes son más grandes que el ancho del tamaño de tus entradas se va a cortar. Tienes que poner imágenes no mayores a ese ancho, en ese caso creo es de 440px

    ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜP๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜO๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜZ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜO+10™, lee esta entrada, ahí hay un código que te puede servir.

    ResponderEliminar
  34. La idea no es que lo apliques donde se explica, sino que como lo menciono en la entrada puedes poner el código en cualquier otro elemento, en este caso en la imagen que quieres proteger.

    ResponderEliminar
  35. hola Ciudad Blogger,como siempre yo aqui viendo lo mas nuevo en ayuda,gracias por tu apoyo Potro..
    Hey potro como le puedo hacer para quitar esta barra que no me gusta porque se corre hacia la derecha...te dejo esta imagen pa que veas..gracias de antemano
    dolor sit amet,

    ResponderEliminar
  36. Agrega antes de ]]></b:skin> esto:

    html {
    overflow-x:hidden;
    }

    Saludos.

    ResponderEliminar
  37. @ POTRO ... se quito la barra,pero siempre corre por el lado derecho,osea que nomas se kito la baara lol! algun otro metodo POTRO?? gracias de antemano!!

    ResponderEliminar
  38. Yo lo veo centrado, quizá es tu navegador.

    ResponderEliminar
  39. MIRA POTRO A VER SI LE ENTIENDES,aqui te dejo unas imagenes pa que lo cheques,
    pix 1
    pix 2

    ResponderEliminar
  40. No he podido confirmar que también tenga ese problema pues uso una laptop y no tengo ese botón, pero, no creo que sea un inconveniente, es decir, no toda la gente que tiene un mouse con ese botón lo usa.

    ResponderEliminar
  41. @POTRO : El problema es que a mi no me gusta! lol...
    pero bueno nimodo,ya ! gracias por tu ayuda!

    ResponderEliminar
  42. Ya no funciona Potro. Parece que el servidor del script no funciona y por tanto éste tampoco. Si todabía tienes el script en tu ordenador subilo a dropbox o algún servdor así y luego lo subo a mi hosting por las dudas. Un saludo ;)

    ResponderEliminar
  43. Noup, si copias la URL del fichero verás que funciona perfectamente.

    ResponderEliminar
  44. No caso una... Hola potro. Esto esta buenísimo pero no puedo lograrlo. Descargue los archivos pero no puedo leerlos. Podrás adivinar que onda?
    Quiero que los padres se copen con esto. Si queres revisar, la plantilla es esta: http://rdrescuelitadominical.blogspot.com/

    ResponderEliminar
  45. Ahora sí. Ya lo logre, disculpa las molestias.

    ResponderEliminar
  46. No es ninguna molestia, que bueno que ya lo has resuelto y está funcionando :)

    ResponderEliminar
  47. Hola Gracias por los tutos en en tu web estan geniales. e usado muchos de ellos en nuestro blog pero ahora tengo una pregunta. espero puedas ayudarme me gustaria poner un diseño distinto a las paginas estaticas pero no como lo hiciste en el tutorial. de las entradas y paginas estaticas. mas bien lo que nececito es algo como tienes en el blog de pruebas http://ciudadblogger3.blogspot.com/p/pagina-tres.html esto lo quiero para poner el chat pero qe este en mi blog y no en un host independiente como lo tengo hasta ahora este es nuestro blog http://www.rocafirmeradio.com/ gracias de antemano

    ResponderEliminar
  48. Qué gusto que los tutoriales sean de tu agrado y te sirvan de ayuda :)
    Lo que hice ahí es ocultar la sidebar en las páginas estáticas, sólo que además de eso también oculté la cabecera y el footer:
    http://ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

    Saludos!

    ResponderEliminar
  49. graciaspor la ayuda ahorita mismo lo intentare gracies nuevamente

    ResponderEliminar
  50. como hago para que las imagenes queden encima de otras y desordenadas?

    ResponderEliminar
    Respuestas
    1. Mira esta entrada de Oloblogger:
      http://www.oloblogger.com/2009/03/position-imagenes-fijas-o-desubicadas.html

      Eliminar

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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger