Archiv para enero, 2011

Como hacer dos listas ordenables, arrastrables y tirables con jquery y javascrip

Escrito por aserrano. Posteado en Javascript

Hacer esto con Jquery es bastante sencillo.

Primero haremos dos listas donde queremos tener los datos a ordenar y cuyos datos queramos pasar de una columna a otra

A estas listas desde jquery haremos que puedan ser contenedores "droppable", es decir, capaces de aceptar un drop

Asimismo las haremos "sortable", es decir que se puedan ordenar.

Ahora necesitamos los elementos "draggable" que serán los elementos <li>

Aquí el código y más abajo un ejemplo funcional:

 <script>
    $( function() {
        $(".dragli").draggable({
          appendTo : "body",
          revert : "invalid",
          helper : "original",
          start: function(event, ui) {
 
          }
          });
 
        $( "#droppable ul,#droppable2 ul" ).droppable({
            accept: ".dragli",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
              //$( this ).find( ".placeholder" ).remove();
              $( "<li class='dragli'></li>" ).text( ui.draggable.text() ).appendTo( this );
              ui.draggable.remove();
              }   
        }).sortable({
          items: "li:not(.placeholder)",
          sort: function() {
            $( this ).removeClass( "ui-state-default" );
          }
        });
        $("#droppable,#droppable2" ).droppable({
          accept: ".dragli",
            drop: function( event, ui ) {
              $( "<li class='dragli'></li>" ).text( ui.draggable.text() ).appendTo( $( this ).find( ".placeholder" ) );
              ui.draggable.remove();
              }
         });  
    });
  </script>

Código html:

<style>li.dragli {
  background: #B7D6E7;
  list-style-type: none;
  margin: 0 0;
  padding: 5px 5px;
  border: 1px solid black;
  border-color: #006600;
 
}
</style>
<div id="droppable" class="ui-widget-header" style="width: 300px; height:200px;background: #a0a0a0;" >
  <ul class="col-sort"><li class="placeholder">Arrastra tus listas aquí</li>
<li class="dragli">otra lista</li>
</ul>
  </div>
 
  <div id="droppable2" style="width: 300px; height:200px;background: #FFa0a0;" >
  <ul class="col-sort">
   <li class="placeholder">Arrastra tus listas aquí</li>
   <li class="dragli">hola</li>
   <li class="dragli">adios</li>
   <li class="dragli">pasa con tu rollo</li>
  </ul>
  </div>
  • Arrastra tus listas aquí
  • otra lista
  • Arrastra tus listas aquí
  • hola
  • adios
  • pasa con tu rollo

Quora y su fallo de confidencialidad

Escrito por aserrano. Posteado en quora

Por todos los informáticos es conocido que al hacer un formulario de entrada clásico, login-password, en el momento que no se introducen datos válidos no se debe informar de que ha fallado, ya sea el login, ya sea la contraseña. Quora va un pasito más allá, en su formulario de entrada, no sólo te informa de que el login es correcto sino que incluso te dice a quien pertenece y todo ello sin ni siquiera entrar la contraseña, todo ello gracias a Javascript y AJAX. ¡Probad! ¡Probad! Id al formulario de entrada, probad a introducir el correo de un amigo que sepáis que está en quora, pulsad el tabulador y vualá, os aparece su nombre. Con esto hemos conseguido dos cosas, validar el correo, se podría hacer spam con él, y relacionarlo con un nombre y posiblemente unos apellidos. Si además algún hacker se dedica a investigar el javascript de la página posiblemente, no he tenido tiempo de hacer mis propias investigaciones, pueda realizar una mini-aplicación para averiguar los correos de mucha gente. Fallo de seguidad garrafal, fallo de confidencialidad enorme. Muy mal por los chicos de Quora. Me he permitido el lujo de hacer esto de interés público porque después de reportarlo dos veces a quora no han tenido a bien contestarme y espero que si llega a la opinión pública eliminen ese formulario. ¿que os parece? ¿os parece tan grave como pienso? ¿o pensáis por el contrario que no es tan grave?

Abre el museo del rock en Barcelona

Escrito por aserrano. Posteado en C++

El 31 de Marzo abrirá en Barcelona el primer Museo del Rock en Europa. Ubicado en la antigua plaza de toros de las arenas, contará con la aportación de la colección y su mayor impulsor, el periodista Jordi Tardà. Contará además con una sala de conciertos y salas monográficas dedicadas a Rolling Stones, The Beatles y el rock nacional. En palabras de Jordi Tardà: “Podremos ver documentos insólitos e inéditos, como una entrada de los Rolling firmada por todos los miembros del grupo y una guitarra de John Lennon”. Esperemos que la iniciativa vaya muy bien. Copiado desde http://www.muspe.com/blog/es/2011/01/20110113092546/museo-rock-barcelona.html

Nota legal

(C) Antonio Serrano 2012