Crear objetos arrastrables en Blogger con jQuery UI

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>
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger