Elementos draggables en jQuery
Como hemos comentado en la introducción de este tema se va a trabajar con los diferentes elementos gráficos y de funcionalidad que provee jQuery. Lo primero que vamos a estudiar son los elementos arrastrables (draggables). Estos objetos no son más que elementos del DOM de nuestra web (preferiblemente del tipo div) que se les da un comportamiento “vivo” dentro de nuestra aplicación, pudiendo arrastrar este nodo del dom a otra parte de la web con el uso del ratón.
Para poder hacer uso de estas capacidades de jQuery, es necesario bajarnos (además del fichero principal de jQuery que se menciono en el primer capitulo sobre este framework) el complemento jQuery-ui. Este complemento hace mención a jQuery user interface, y como su nombre indica lleva las librerías que nos ayudarán a realizar nuestra interfaz en Javascript. Podemos bajarnos la última versión desde la url: http://jqueryui.com/download (una vez en la web, elegiremos descargar la versión “stable”). Para poder trabajar con objetos de tipo “dragg” deberemos incluir la librerías jquery.ui.core.js y jquery.ui.draggable.js. También podemos incluir un único fichero jquery-ui-X.YYY.custom.js (donde X.Y corresponde a la última versión). Todos estos ficheros (para desarrollo) los puedes encontrar en el directorio (development-bundle/ui/). Nuestra cabecera para empezar a trabajar quedaría así:
<script src="jquery.js"></script>
<script src="jquery-ui-1.8.17.custom.js"></script>
<!-- Otra opción, solo con las librerías extrictamente necesarias
<script src="jquery.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.draggable.js"></script>
-->
Una vez instaladas las librerias solo debemos de ver como convertir nuestro elemento del DOM en un elemento arrastrable. Esto lo haremos con el método “draggable”:
$("#divObjetivo").draggable({options}
Donde “divObjetivo” será el identificar de un elemento div y options las opciones que vayamos a ponerle. Las más comunes son:
- axis[x,y] = puede tener los valores 'x','y' o vacío, especifica las posibles direcciones de arrastre.
- revert:[true,false] = si se selecciona como true, hará que el elemento vuelva a su posición inicial al terminar el arrastre.
- helper:[original,clone] = en la opción clone, crea una copia que es arrastrable y desaparece al terminar.
Podemos verlo aplicado en el siguiente código HTML y Javascript. En el, crearemos tres bloques en una disposición vertical, uno a continuación del otro. El primero, al pinchar sobre el y arrastrarlo, creará una copia que se moverá con nuestro ratón (opción 'clone'). El segundo solo se moverá de forma horizontal (opción 'axis: 'x'). Por último crearemos un bloque que al soltar el ratón vuelva a su posición original (opción: 'revert').
html>
<head>
<script src="jquery.js"></script>
<script src="jquery-ui-1.8.17.custom.js"></script>
<script>
$(document).ready(function(){
//cuando el documento este disponible haremos
//"arrastrable" los divs con la clase bloque.
$(".bloque").draggable({helper:'clone'});
$(".bloqueVertical").draggable({axis:'x'});
$(".bloqueHorizontal").draggable({revert:true});
});
</script>
<style>
div {
width: 150px;
height: 70px;
margin: 10px;
}
.bloque {
border: 2px solid #0090DF;
background-color: #68BFEF;
}
.bloqueVertical {
border: 2px solid #FF90DF;
background-color: #FFBFEF;
}
.bloqueHorizontal {
border: 2px solid #00FFDF;
background-color: #68FFEF;
}
</style>
</head>
<body>
<div class="bloque"></div>
<div class="bloqueVertical"></div>
<div class="bloqueHorizontal"></div>
</body>
</html>
