Reorganización de elementos con efectos jQuery

Quicksand es un plugin para jQuery que nos permite reorganizar elementos de forma dinámica utilizando una animación muy similar a la que se obtiene con cualquiera de los software de Apple.

La forma de trabajar de este plugin de jQuery es bastante interesante, porque vamos a definir dos listas distintas, una con la ubicación inicial de los elementos y otra con el destino de estos, de esta forma el plugin lo único que hace es el trabajo de transformar una forma en la otra.

mover elementos jquery

El código de ejemplo que nos brindan en el sitio oficial tiene una llamada:

$('#source').quicksand( $('#destination li') );

Y un código HTML en que se ven las dos instancias que comentaba hace unos momentos:

<ul id="source">
	<li data-id="iphone">iPhone OS</li>
	<li data-id="android">Android</li>
	<li data-id="winmo">Windows Mobile</li>
</ul>

<ul id="destination">
	<li data-id="macosx">Mac OS X</li>
	<li data-id="macos9">Mac OS 9</li>
	<li data-id="iphone">iPhone OS</li>
</ul>

El plugin después tiene varias opciones mas de configuración, desde la animación como los tiempos de reorganización de elementos, merece la pena leer la documentación.

Web: Quicksand

Categorizado en: