Mar/108
Ordenar elementos con jQuery
Vamos con otro tema que tenía en cartera hace ya tiempo – debería escribir las cosas cuando las aprendo, y no meses después, que me cuesta el doble – tuve que hacer algunas pruebas con jQuery que quiero compartir. Necesitaba conseguir un prototipo de interfaz de widgets, estilo iGoogle o netvibes.
Para conseguir este efecto, utilizaremos la función sortable de jQuery UI. Bien, organizamos el html con tres contenedores que harán de columnas y que ha su vez contendran listas para organizar los widgets, mejor ver el código:
<div id="wrapper"> <div id="uno" class="colum"> <ul> <li> <div class='header'> Drag me </div> Contenido del widget </li> <li> <div class='header'> Drag me </div> </li> <li> <div class='header'> Drag me </div> <div> </div> </li> </ul> </div> <div id='dos' class="colum"> <ul> <li> <div class='header'> Drag me </div> </li> <li> <div class='header'> Drag me </div> <img src="http://a1.twimg.com/profile_images/186917016/img2.jpg" alt="yngir" /> </li> <li> <div class='header'> Drag me </div> <div> </div> </li> </ul> </div> <div id='tres' class="colum"> <ul> <li> <div class='header'> Drag me </div> </li> <li> <div class='header'> Drag me </div> </li> <li> <div class='header'> Drag me </div> <div> </div> </li> </ul> </div> </div>
Configuramos los estilos:
<style type="text/css"> div#wrapper { width: 1024px; margin: 0 auto; } div.colum { width: 33%; float: left; } ul { padding: 5px; padding-left: 10px; margin: 0 auto; } li { list-style-type: none; height: 150px; border: solid 1px Black; margin-top: 10px; text-align: center; } .sortHelper { border: 3px dashed #000; } div#uno li { background-color: ActiveBorder; } div#dos li { background-color: Highlight; } div#tres li { background-color: Yellow; } div.header { background-color: White; border-bottom: solid 1px Black; height: 25px; cursor: move; } </style>
Hasta aquí, deberíamos ver la página cómo la de demo pero sin el movimiento de drag&drop.
Ahora cargamos las librerías necesarias de javascript, que para este caso serán, la jquery.min.js, ui.core.js y ui.sortable.js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="/scripts/ui.core.js" type="text/javascript"></script> <script src="/scripts/ui.sortable.js" type="text/javascript"></script>
Y por último y más importante, incluimos la función jQuery al final de nuestro html, para que se ejecute una vez ha finalizado la carga de nuestra estructura dom de la página:
<script type="text/javascript"> $(document).ready(function() { $("ul").sortable({ connectWith: "ul", items: "li", hoverClass: "sortHelper", cursor: 'move', opacity: 0.8, revert: true, tolerance: 'pointer', placeholder: 'sortHelper', handle: $(".header") }); }); </script>
Los parámetros más importantes són el handle que indica desde que elementos se podrá iniciar la acción de ordenación, el items, que indica que elementos serán ordenados y el connectWith, que es el que indica que otros elementos podrán recibir a los items.
