Crear objetos arrastrables en Blogger con jQuery UI

En esta oportunidad veremos una forma muy sencilla de crear objetos arrastrables con jQuery UI, la ventaja de esto es que podemos permitir al usuario que mueva los items a su antojo y así tengamos una plantilla con funciones un poco mas dinámicas.

Para comprobar el resultado basta con observar los siguientes ejemplos (Arrastra los cuadros de colores):

Toma este elemento con el mouse para comprobar la funcionalidad completa (Se transparenta)

Este ejemplo NO se transparenta al arrastrarlo

El tutorial:

Paso 1: Añadiendo jQuery UI en la plantilla:

Advierto que no sólamente es necesario tener jQuery UI instalado en la plantilla, sino también jQuery.

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

</head>

Arriba de ésta pega el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript" />

Guarda los cambios y listo.

Paso 2: Añadiendo la función en algún elemento:

Este paso es muy sencillo y el código es bastante resumido. Primero, lo que haremos será crear una función  en jQuery:

<script type="text/javascript">
$(function() {
......
});
</script>

Reemplazaremos los puntos "......" por un selector, al cual le asignaremos la funcionalidad ".draggable". Quedaría de la siguiente forma:

$( "#ID-DEL-ELEMENTO" ).draggable();

El código completo quedaría  así:

<script type="text/javascript">
$(function() {
$( "#ID-DEL-ELEMENTO" ).draggable();
});
</script>

Este código debería ir antes de:

</head>

Extra: Añadir opciones adicionales:

Si deseas añadir mas funciones, basta con visitar la documentación de jQuery UI y revisar la pestaña "Options". Las opciones están explicadas en inglés pero son fáciles de entender.

Si alguna opción te gusta, deberás insertarla de la siguiente forma:

<script type="text/javascript">
$(function() {
$( "#ID-DEL-ELEMENTO" ).draggable({ opción: valor });
});
</script>

En el ejemplo de la opacidad, el código quedaría de la siguiente forma:

<script type="text/javascript">
$(function() {
$( "#ID-DEL-ELEMENTO" ).draggable({ opacity: 0.60 });
});
</script>