mouse: Drag and Drop con jQuery (Ejercicio Resuelto)

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:

2 comentarios:

Anónimo17 de enero de 2012, 2:57
una pregunta como le podria hacer para que al final me guarde los valores de ambas listas o para que la segunda lista al final pueda enviar a otro formulario los valores que tuvo al final
ResponderEliminar
Respuestas
David Leon Baeza1 de marzo de 2013, 9:59
podrias dar el nombre exacto de las librerias .js que utilizas!
gracias
ResponderEliminar
Respuestas

Añadir comentario

18/9/11

Drag and Drop con jQuery (Ejercicio Resuelto)

2 comentarios: