Mover y ordenar elementos entre listas con jquery UI

Publicado por & archivado en Javascript, Programación.

uiJquery User Interface (jquery UI) es una de las librerías más utilizadas a la hora de implementar funcionalidades javascript. Su gran número de widgets, amplia documentación, temas y continuas actualizaciones la han convertido en imprescindible, aunque como no podía ser de otra forma, siempre acabaremos necesitando alguna funcionalidad que va más allá de lo que podemos encontrar en su documentación básica.

Un ejemplo de ello sería poder arrastrar elementos para ordenarlos entre distintas listas. Utilizando la función sortable de jquery-ui, podemos crear una lista ordenable, pero para conectar varias de estas listas, deberemos pensar un poco más.

Veamos un ejemplo de la funcionalidad que necesitamos:

A continuación describiremos paso a paso cómo se ha llevado a cabno este ejemplo. Si queréis, podéis descargar el resultado final en este enlace.

En primer lugar deberemos llamar los scripts necesarios (jquery y jquery-ui). En la web de jquery UI podéis descargaros toda la librería, o solamente la parte que os interese, así como numerosos temas que también son configurables.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Creamos varias listas y les asignamos una clase común para poder interconectarlas, por ejemplo, .list, y les añadimos los elementos que necesitamos ordenar

<div class=”list”>
<div>A</div>
<div>B</div>
<div>C</div>
</div>

<div class=”list”>
<div>D</div>
<div>E</div>
<div>F</div>
</div>

El script que necesitamos, tendría este aspecto:

$(“.list”).sortable({
connectWith: ‘.list’,
placeholder: ‘place_holder_element’,
helper: function(event, el) {
var myclone = el.clone();
$(‘body’).append(myclone);
return myclone;
},
}).disableSelection();

La propiedad connectWith es la que nos permite interconectar las listas mediante su clase.

Como veréis en el ejemplo se han añadido ciertas funcionalidades para darle cierta vistosidad, vamos a comentarlas un poco:

podemos asignar un estilo con la propiedad placeholder, la cual creará un espacio donde visualmente se nos muestra dónde dejaremos “caer”nuestro elemento (amarillo en el ejemplo). Podemos maquetar mediante css esta clase para darle el aspecto que queramos.

placeholder: ‘place_holder_element’,

receive es la acción que se llama cuando una lista detecta que hemos dejado un elemento sobre él. Gracias a ella podemos interactuar con nuestra base de datos, vía ajax por ejemplo, o dar cierto feedback como en nuestro pequeño ejemplo.

receive: function( event, ui ) {
var list=$(this).sortable().attr(“id”);
$(“#result_1”).attr(“value”,ui.item.attr(“id”)+” movido a la lista “+list);
},

stop es la acción que se dispara cuando movemos un elemento de posición (lo cambiemos de lista o no). Al igual que con receive, gracias a esta acción podemos interactuar con nuestra base de datos o mostrar algún feedback.

stop:    function( event, ui ) {
$(“#result_2”).attr(“value”,ui.item.attr(“id”)+” movido a posición “+(ui.item.index()+1));
}

 

Espero que este tutorial os haya servido de ayuda!

Referencias:

http://jqueryui.com/sortable/

http://jqueryui.com/

http://jquery.com/

4 Comentarios para “Mover y ordenar elementos entre listas con jquery UI”

      • kike

        Hola.
        Estoy iniciandome en el mundillo de la programación.
        Cogiendo esta idea sería muy complicado almacenar el orden final en una tabla en mysql? Si eso se pudiera realizar “facilmente” sería de gran ayuda para un proyecto personal que tengo en mente…
        Si me pudieráis decir donde encontrar esa información o cómo implementarlo os estaría muy agradecido. Un saludo

        Responder
        • Artimedia

          Hola Kike.

          En este caso, dado que ya se está utilizando jquery podrías usar su función ajax para enviar la información. Puedes sustituir la línea de código del ejemplo:

          $(“#result_1″).attr(“value”,ui.item.attr(“id”)+” movido a la lista “+list);

          por tu llamada ajax (o simplemente la puedes añadir después), que se ejecutará cada vez que haya un cambio en la lista.

          Aquí tienes un poco más de información al respecto: http://api.jquery.com/jquery.ajax/

          Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Utilizamos cookies de terceros para recoger información sobre sus visitas y su uso de nuestra web. En caso de continuar navegando por esta web entenderemos que acepta el uso de estos dispositivos. Más información: Política de Cookies .

ACEPTAR
Aviso de cookies
Artimedia