Capturar webcam con VB.NET

¿Que haremos? Crearemos una aplicación en Visual Studio, la cual hará uso de una webcam para capturar el video en frames independientes y depositarlos en memoria para despues mostralos al usuario a través de un picturebox y un Timer para crear la ilusión de movimiento. ¿Porque lo haremos? Porque es justo y necesario ¿Que necesitamos? [...]

Envío de correo con JavaMail/Netbeans

JavaMail es una expansión de Java que facilita el envío y recepción de e-mail desde código java. JavaMail implementa el protocolo SMTP (Simple Mail Transfer Protocol) así como los distintos tipos de conexión con servidores de correo -TLS, SSL, autentificación con usuario y password, etc [Según SantaWikipedia] ¿Qué necesitamos? JavaMail 1.4.5 Java y Netbeans 6.9 [...]

Proyecto de base de datos Firebird VB

En este proyecto realizaremos una aplicación de base de datos Firebird con el lenguaje de programación de Visual Basic de Microsoft, este proyecto tendrá las funciones básicas de gestión INSERT, DELETE, UPDATE y una interfaz de usuario para utilizarlas. ¿Que necesitamos? Visual Studio 2008 o superior Firebird última versión Firebird ADO.NET Data Provider. Conocimientos básicos [...]

Imprimir imagen con Print

La siguiente clase hace uso de PRINT para imprimir una imagen que se encuentra en un variable de tipo FileInputStream, esta clase a su vez es implementada desde una interfaz que hace fácil su uso, la clase así como todo el proyecto esta comentado. import java.io.File; import javax.print.Doc; import java.io.IOException; import javax.print.DocFlavor; import javax.print.SimpleDoc; import java.io.FileInputStream; [...]

Code Army Bolivia

18/9/11

Drag and Drop con jQuery (Ejercicio Resuelto)

JAN29

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ónimo dijo...

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

David Leon Baeza dijo...

podrias dar el nombre exacto de las librerias .js que utilizas!
gracias

Post recomendado