Ordenar elementos con jQuery

19
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.

¿Te gustó este artículo?

¡Considera suscribirte a nuestro feed!

Archivado en: jQuery

8 Comments

Comentarios (8) Trackbars (0) ( suscribirse a los comentarios de esta entrada )

Anonimo
4:11 pm on Julio 29th, 2010
Sí lo haces hazlo bien, si quitas todas las div de una columna ya no las puedes volver a posicionar ahí, así que sí lo has hecho en un cliente tienes un bug calamidad.

A seguir estudiando!!!
gerard
6:18 pm on Agosto 1st, 2010
@Anonimo :O me encantan los comentarios constructivos, el tuyo es super enriquecedor!
Por cierto, si que puedes devolver los elementos a una columna una vez vaciada, dale un repaso. Y gracias por tu advertencia, pero eran unas pruebas, no es algo que este en cliente.
Estaría encantado en que dejases unos enlaces a tus grandes aportaciones al mundo para seguir estudiando, algunos tenemos humildad
Marcos
10:25 pm on Septiembre 9th, 2010
Gracias, por el código.
No hagas caso a los que no tienen nada que compartir…

sldos
gerard
11:35 am on Septiembre 12th, 2010
Gracias @Marcos
sebas
1:59 pm on Abril 14th, 2011
estaba buscando un ejemplo rapido para empesar con un laburito y me solucionaste la idea a los 5 minutos de googlear danke
bogue
12:35 pm on Julio 1st, 2011
Sencillo, claro y limpio…. magnífico, felicidades me has ayudado muxo con este ejemplo.
beto
5:27 pm on Noviembre 10th, 2011
hola.
una pregunta, una vez que reordenas los widgets, hay forma de que cuando guardes esos cambios? , para que cuando actualizes la pagina los widgets se muestren con el nuevo orden.
beto
5:25 pm on Noviembre 11th, 2011
Hola de nuevo, ayer encontre esto, es lo mismo que esta aca, pero ademas tiene lo que estaba preguntando.

http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

Deja un comentario

Aún sin trackbacks.

Glopez Blog