Problema: Se desea desarrollar una aplicacion web utilizando JavaScript y el plugin JQuery UI para seleccionar nombres de una lista de alumnos y arrastrarlos en una nueva lista los nombres de la lista vienen de una base de datos y cada uno de ellos tiene un identificador único (ID) ademas del nombre del alumnos (texto), los valores seleccionados seran utilizados para el registro de estos en una nueva tabla, asi que se necesitan recuperar los ID unicos asi como los nombres de los alumnos
Restricción: La cantidad maxima de nombres seleccionables son 3, la aplicación no debe
permitir que se añadan más nombres a la nueva lista, debe avisar de ello al usuario
Solucion:
Para este problema se utilizaran el plugin de JQuery v1.6.2 y JQuery UI 1.6rc6, estos se añaden a la pagina web:
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery-ui-personalized-1.6rc6.min.js"></script>
Se crea la estructura de las listas utilizando DIV, Ul, IL, se añade tambien un Button
<div id="div_box">
<span>Lista de Alumnos</span>
<ul id="lista1">
<li id="76"><a href="#">Emiliano Salido del Pozo</a></li>
<li id="200"><a href="#">Rosa Malpartida</a></li>
<li id="41"><a href="#">Rosa Melcacho</a></li>
<li id="7"><a href="#">Miren Amiano</a></li>
</ul>
</div>
<div style="float:left; margin-top:80px;"><input name="boton" id="boton" type="button" value="Seleccionar" /></div>
<div id="div_box">
<span>Alumnos Seleccionados</span>
<ul id="lista2">
<li id="11"><a href="#">Debora Vergara</a></li>
<li id="12"><a href="#">Benito Camela Suavecito</a></li>
</ul>
</div>
Para organizar y formatear las listas y los contenedores se utiliza estilos CSS
#div_box{
overflow: auto;
float:left; height: 160px;
width:220px;
margin:10px 10px 0 10px;
padding:5px 10px 5px 10px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border: 1px solid #E5E5E5;
}
ul {
list-style: none;
height:auto;
width:200px;
margin: 0;
padding: 0;
}
li a {
text-decoration: none;
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
}
li a:link, li a:visited {
color: #777;
display: block;
background: url(bg.gif);
padding: 8px 0 0 20px;
}
li a:hover {
color: #257EB7;
background: url(bg.gif) 0 -32px;
padding: 8px 0 0 25px;
}
li a:active {
color: #fff;
background: url(bg.gif) 0 -64px;
padding: 8px 0 0 25px;
}
Se utiliza una imagen de fondo para los items de laas listas (Archivo: bg.gif)
Aplicando la hoja de estilos a la pagina web, tenemos:
Para agregar la interactivadad a la pagina se debe añadir el codigo JavaScript, el codigo completo de la pagina es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drag and Drop</title>
<link rel="stylesheet" href="style.css">
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery-ui-personalized-1.6rc6.min.js"></script>
<script language="javascript">
$(document).ready(function(){
// lista 1
$('li',$('#lista1')).draggable({
helper: 'clone',
});
$('#lista1').droppable({
accept: '#lista2 li',
drop: function(ev, ui) {
$(ui.draggable).fadeOut(function() {
$(ui.draggable).appendTo($('#lista1')).fadeIn();
});
$(ui.draggable).fadeIn();
}
});
// lista2
$('li',$('#lista2')).draggable({
helper: 'clone',
});
$('#lista2').droppable({
accept: '#lista1 li',
drop: function(ev, ui) {
$(ui.draggable).fadeOut(function() {
if( $('#lista2 li').size()==3 )
alert ('No se puede agregar mas de 3 nombres');
else
$(ui.draggable).appendTo($('#lista2')).fadeIn();
});
$(ui.draggable).fadeIn();
}
});
//Si cualquiera de los contenedores no tiene elementos, muestra un espacio vacio de color #E1F0FA
$("#div_box").hover(function(){
if( $('#lista1 li').size()==0){
$("#lista1").css({ border: "1px solid #9D9D9D" , background:"#E1F0FA", height:"28px", "border-radius":"3px 3px 3px 3px"});
}
else{
$("#lista1").css({ border: "none", height:"auto", background:"#fff" });
}
if( $('#lista2 li').size()==0){
$("#lista2").css({ border: "1px solid #9D9D9D" , background:"#E1F0FA", height:"28px", "border-radius":"3px 3px 3px 3px"});
}
else{
$("#lista2").css({ border: "none", height:"auto", background:"#fff" });
}
});
// evento para el boton
$("#boton").click(function () {
var salida = " ALUMNOS SELECCIONADOS \n \n";
$('#lista2 li').each(function () {
var id_ = $(this).attr('id');
salida +="id: " + id_ + " - Nombre: " + $('#'+id_).text() + "\n";
});
alert (salida);
});
});
</script>
</head>
<body>
<div id="div_box">
<span>Lista de Alumnos</span>
<ul id="lista1">
<li id="76"><a href="#">Emiliano Salido del Pozo</a></li>
<li id="200"><a href="#">Rosa Malpartida</a></li>
<li id="41"><a href="#">Rosa Melcacho</a></li>
<li id="7"><a href="#">Miren Amiano</a></li>
</ul>
</div>
<div style="float:left; margin-top:80px;"><input name="boton" id="boton" type="button" value="Seleccionar" /></div>
<div id="div_box">
<span>Alumnos Seleccionados</span>
<ul id="lista2">
<li id="11"><a href="#">Debora Vergara</a></li>
<li id="12"><a href="#">Benito Camela Suavecito</a></li>
</ul>
</div>
</body>
</html>
El resultado:
continue reading
