Design Web Tierra Virtual

Manual, tutorial Jquery Drag&Drop

Aquí os traigo otro tutorial sobre Jquery, en este caso os presento el plugin para hacer vistosos y por que no decirlo utiles Drag&Drop tanto de objetos, de tablas, como de otras muchas utilidades que tiene este plugin por ello he decidido dividir este manual en varias partes ya que es un plugin muy extenso y algo complicado de entender, Manos a la obra..

Empezaré como siempre con las librerias que vamos a utilizar.

1. Jquery
2. Ui.base.js
3. Ui.base.draggable.js
4. Ui.base.droppable.js

Con estas librerias vamos a poder hacer unos efectos muy interesante, a continuacion os voy a detallar un poco un codigo de ejemplo.

HTML

Javascript

Vamos a explicar por partes cada elemento.
.dragable ( con esta opcion le damos la propiedad Dragg al objeto con clase .block, es decir el div con la clase .block se puede arrastrar y mover por la pantalla)
.helper:’clone’ <- Evidentemente como su nombre indica le hemos dicho que a la hora de arrastar clone el objeto a arrastrar.

Por otro lado tenemos las ordenes para el objeto con clase .drop:
accept:’.block’ <- le indicamos que el objeto solo aceptara aquellos con clase .block, es decir que solo podremos arrastrar a la zona .drop objetos con clase . block
activeClass: ‘nombre de clase’ <- obvio no? clase asignada al objeto con clase .drop cuando esta activo.
hoverClass:’nombre de clase’<- lo mismo que la anterior pero en este caso cuando situamos el objeto por encima de la zona .drop
drop:function<- se utiliza esta opcion para decirle que vamos a hacer cuando el objeto sea arrastrado a la zona .drop.

$(this).append(”<br>Dropped!”); <- obviamente en este ejemplo cuando arrastramos .block sobre .drop en el div con clase .drop se le añade el mensaje Dropped y un salto de linea.

Imaginaros ahora las posibilidades, lo sencillo que ha sido darle a un objeto la movilidad y lo sencillo que es asignar una zona para dejar esos objetos, evidentemente esa zona la podemos definir dentro de un css, otorgandole el estilo que nos venga bien en cada momento, como veis es muy sencillo hacer un carrito de compra al mas puro estilo arratrar y soltar.

Este plugin de Jquery tiene multiples opciones asi como no solo con objetos si no tambien con listas o tablas, de esta forma resulta muy util por ejemplo si queremos ordenar una lista o cambiar los contenidos de una celda otra en una tabla.

Aqui os dejo un ejemplo,

http://docs.jquery.com/UI/Droppables

En el siguiente tutorial explicare algunos metodos mas de arrastrar y soltar objetos, y haremos un carrito de compra arrastrando productos del escaparate a la cesta, saludos.

Daniel.