Arrastrar imágenes con JQuery

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.