Sortable JS + Alpine.js Para la ordenación Drag and Drop - 23

▶

La siguiente operación que vamos a realizar es permitir que el estado sea ordenable, es decir, ordenable mediante drag and drop. Que podamos seleccionar un ítem y ubicarlo en otra parte.

Para esto, es muy fácil. Ya existe un plugin en JavaScript, es decir, no forma parte de Alpine, pero lo podemos integrar fácilmente. El plugin se llama SortableJS. Escribimos “sortable js” (de ordenable) y entramos al primer enlace. Como te comentaba, no es un plugin específico para Alpine, sino que es puro JavaScript.

Aquí puedes ver algunos demos de cómo funciona: damos clic, lo sostenemos y lo arrastramos. Y, como te digo, existen muchas implementaciones posibles: para compartir, ordenar, etc.

Instalación con CDN

A nosotros nos interesa instalarlo mediante la CDN. Puedes buscar “sortable js cdn”. Si no encuentras nada al principio, puedes ir directamente a la página de jsDelivr o similar. En este caso, encontramos la CDN, la copiamos y la pegamos en nuestro proyecto.

Yo la voy a colocar justo después del script de Alpine, para mantener el orden. Su uso es muy sencillo, como puedes ver en la documentación oficial. Básicamente, consiste en obtener el listado de elementos mediante un selector y luego aplicar Sortable.create, pasándole el elemento. Con eso, el contenido ya sería ordenable. Bastante simple.

Integración con Alpine

Ahora bien, como este plugin no forma parte del ecosistema de Alpine, tenemos que ingeniárnoslas un poco para integrarlo. En Alpine tenemos un atributo llamado x-init, que se ejecuta cuando se crea el componente. Es decir, actúa como una especie de constructor, y lo podemos aprovechar para hacer esta inicialización.

Entonces, lo que haremos será referenciar nuestro listado —que es lo que queremos hacer ordenable— mediante x-ref, aunque perfectamente puedes usar un selector como los que se muestran en la documentación oficial (por ejemplo, document.querySelector, getElementById, etc.).

En uno de los ejemplos, puedes ver que se referencia así directamente. Pero como a nosotros nos gusta complicarnos la vida, vamos a usar x-ref.

Código de ejemplo

Una vez instalado el plugin, verificamos que no tengamos errores 404. Todo perfecto. Entonces ya podemos comenzar.

Voy a colocar un x-init="order" para que todo quede organizado. Este método order lo vamos a crear justo debajo de data. Lo colocamos así:

order() {
 console.log("Inicializando sortable...");
}

Aquí puedes ver que, cuando se crea el componente, se llama este método. Muy sencillo. En este método aprovechamos para hacer la inicialización de Sortable.

Sortable.create(this.$refs.items);

Aquí le pasamos el ref que definimos como items. Entonces, en nuestro HTML colocamos:

<div x-ref="items">
 <!-- ítems a ordenar -->
</div>

Con esto ya debería funcionar todo correctamente.

Resumen

Para resumir un poco:

Utilizamos x-init para inicializar nuestro componente, ideal para este tipo de plugins externos como SortableJS.

Empleamos x-ref como alternativa a querySelector, getElementById, etc.

Vimos cómo instalar y usar un plugin que no forma parte del ecosistema de Alpine directamente en nuestros componentes.

Con esto puedes enriquecer tu interfaz sin necesidad de herramientas más pesadas.