Aprende a manejar el método draggable de jquery-ui, y agrega mayor interactividad a tu sitio web.

jQueryUI nos entrega el método draggable() para que cualquier elemento DOM pueda arrastrarse. Una vez que se establece al elemento a ser arrastrable, puedes mover ese elemento haciendo click sobre él, y con el ratón arrastrándolo a cualquier lugar dentro de la ventana.

Arrastrar no es una característica que está disponible en las páginas web de forma predeterminada, aunque es un método que le da mucha interacción a una página o aplicación web. Afortunadamente, jQuery UI hace simple y accesible este método. 

La forma de poder agregar jqueryui, es la siguiente: 

• Descargar jQuery: http://jquery.com/download/
• Descargar jQuery UI: http://jqueryui.com/download/

La forma más fácil y sencilla, es de la siguiente manera:

Al realizar la selección de algún libro, vemos que se realiza el método draggable, es decir podemos arrastrar a los elementos. Cabe resaltar que al realizar esta animación, sobre el elemento que se realiza se agregan dos clases, ui-draggable y ui-draggable-handle, para realizar el método.

Nota. Si nos damos cuenta simplemente aplicamos el método draggable(), al selector, en este caso, fue de una clase, para poder tener la selecciones de todos los libros, de seleccionar por id, solo haríamos referencia a uno solo, pues la selección con id es a un único elemento.

Sintaxis del método dragging puede ser usado de las siguientes maneras:

$(selector).draggable(opción) o $(selector).draggable({ opción1: valor1, opción2: valor2, ...})

Se puede proporcionar una o más opciones a la vez utilizando objeto Javascript. Y si hay más de una opción se deben agregar separadas mediante una coma. Conozcamos a cada opción con las que cuenta este método. Hablemos de las más importantes opciones con la que cuenta draggable.

axis. Esta opción limita el arrastrado ya sea, en el eje horizontal (x) o eje vertical (y). Valores posibles: "x", "y". Veremos cómo podemos arrastrar solo en el eje “x”.

cancel. Puedes utilizar esta opción para evitar que el método draggable desde que se intenta arrastrar en el elemento especificado. En el ejemplo, se indicará que el método draggable deje de funcionar en el título del libro.

containment. Restringe arrastrando dentro de los límites del elemento o región determinada. Por defecto su valor es "falso". Aquí lo limitaremos solo en la sección “libros”.

disabled. Cuando se define como true, desactiva la capacidad de arrastrar elementos.Por defecto su valor es "false". En el ejemplo, se verá como está desactivado el método draggable.

opacity. El elemento arrastrado, cambia su opacidad una vez realizado el método draggable. Aquí le aplicaremos una opacidad de 0.35.

zIndex. Para el elemento arrastrado se actualiza esta propiedad css z-index. Por defecto su valor es "falso". Agregaremos un z-index de 100 para que veamos la diferencia al ser arrastrado el elemento y poder sobreponer este a los demás elementos, no como en casos anteriores.

Con todo lo aprendido, desarrollemos un ejemplo más completo agregando más de una propiedad.

Métodos de Draggable.

• $ (selector) .draggable ("destroy"); Elimina la funcionalidad que pueden arrastrarse por completo. Esta opción hace regresar al elemento seleccionado de nuevo a su estado inicial.
• $ (selector) .draggable ("disable "); Deshabilita el elemento arrastrable.
• $ (selector) .draggable ("enable"); Activa el elemento arrastrable.
• $ (selector).draggable ("opción", OptionName, "valor"); Obtiene o establece cualquier opción en el elemento arrastrable. el tercer argumento se puede omitir. De otro modo, si se establece valor, al OptionName se agrega el valor proporcionado
• $ (selector) .draggable ("widget"); Devuelve el elemento .ui.draggable.

Bien este tutorial tiene como objetivo mostrarte el manejo del método draggable de jquery-ui, y así poder dar una mayor interacción a tu página o sitio web, hemos conocido las opciones más conocidas a agregar a este método, así como también los diferentes métodos con lo que cuenta.

Recuerda que cuentas con un curso de jQuery-UI al igual que con uno de jQuery, después de todo lo aprendido nos encontramos en próximos tutoriales donde conocerás sobre nuevos temas, si quieres conocer alguno en particular, puedes comentarlo.