Este es un script que fácilmente puede modificarse para crear un carrito de compras, un sistema de widgets como el de wordpress entre otras opciones. Yo lo uso para seleccionar atributos de una lista.
Las listas
El código de las listas no tiene nada especial, sólo debemos asegurarnos que los id sean correctos
[cc lang=»html»]
- Item1
- Item2
- Item3
- Item4
- Item5
- Item6
- Item7
[/cc]
Estilo de las listas
Yo voy a usar un estilo simple en las listas, haciendolas flotar para que este una al lado de la otra además de agregarle una altura mínima para cuando no tenga elementos la lista.
[cc lang=»css»]
body {
color: #333333;
}
#lista1, #lista2 {
width:200px;
border:1px solid #990000;
height:auto;
float:left;
margin-right:5px;
}
[/cc]
Jquery para las listas
Ahora si vamos a la parte importante del post, básicamente lo que voy a hacer es que que ambas listas tengan activo dragable y acepten el drop de la otra lista; además debo hacer que al recibir el drop se agregue el item correspondiente y se borre de la lista de donde proviene. Es posible añadir más opciones como cambiar el estilo entre listas o que el item cambie de forma, etc. Todo es cosa de jugar un poco con el código.
[cc lang=»javascript»]
[/cc]
Y eso es todo el código para la forma más simple de intercambiar items entre listas, se le pueden ñadir muchas más opciones como nos muestra la documentación del Jquery UI
Sobre Jquery UI
Para el ejemplo he usado Jquery 1.3.1 y JqueryUI 1.6rc6, si deseas usar una versión de Jquery 1.6.x, debes usar Jquery UI 1.5 de lo contrario no funcionará, la programación funciona en ambas versiones sin ningún cambio eso por un cambio que hizo jquery en el manejo de eventos drag and drop.
