Jquery 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: