Un par de consejos para crear una tabla con Dragula.

Últimamente estoy escribiendo una serie de post, en los que trato de explicar diferentes problemillas con los que me encuentro y afronto relacionados con el desarrollo de software, principalmente front. La intención de ellos es simplemente tratar de ayudar a aquellas personas que sufran el mismo problema, y esta semana ha tocado la creación de una tabla con drag and drop.

Si necesitas crear una tabla que permita que las filas se desplacen y se reordenen en Angular 2 o superior existe una librería maravillosa que se llama Dragula. En su documentación oficial, muestran claramente que pasos a seguir para implementarlo en tu proyecto y es cómodo y sencillo.

Pero una vez metidos en harina, puede que algunas veces nuestra implementación no funcione tal como debería. En el caso de las tablas con drag and drop, te cuento aquí un par de trucos clave para que funcionen a la perfección.

Creación de la tabla en el archivo .html.

He podido observar y sufrir, como al crear una tabla y añadiéndole la funcionalidad de Dragula, realizaba comportamientos extraños y ralentizaba el movimiento. Mi primera implementación estaba tal que así:

Como ves, básicamente lo que yo desarrollé fue un conjunto de listas desordenadas, utilizando un ul para cada fila y cada celda dentro de la tabla sería un li. La vinculación con Dragula la hacía a través de un div que englobaba todas las filas, y esto era lo que me estaba ocasionando que las filas se moviesen como a cámara lenta.

Esto ocurre porque a pesar de que tanto ul como li son tags semánticas, su renderizado es algo más lento que el de div por culpa del CSS asociado que llevan, así que este comportamiento lo solucioné de la siguiente forma:

En este caso la aproximación es ligeramente distinta, realmente el cuerpo de la tabla es una lista, con la etiqueta ul, mientras que cada fila corresponde a un elemento de esa tabla, li, y cada celda no es más que un div. Este cambio tan simple ha mejorado con mucho el rendimiento visual del drag and drop.

Controlar el onDrop desde código.

Ahora solo queda implementar el código para que funcione este drag and drop y me guarde la reordenación de las filas. Este es el código que yo utilizo:

Vayamos por partes, en el método onDrop asociado al Dragula, lo que yo hago es primero cancelar el movimiento que va a realizar el propio Dragula con la línea:

this.dragulaService.finde('fantasticBeastsTable').drake.cancel(true);

Esto puede sonarte raro, pero lo hago porque no sólo quiero cambiar de posición mi fila, sino que quiero modificar una variable asociada a este orden, así que lo siguiente que hago es detectar tanto el objeto que he movido como el que se encuentra debajo suyo. Modifico su valor para la ordenación y a continuación tras ordenar la lista, recorro uno a uno los elementos de la misma y les asocio el nuevo sortOrder. Esto hará que la lista visualmente se reordene pero que además tenga mis objetos actualizados.

Por último en el método onMoveDiv, cancelo el movimiento para aquellas celdas que así lo piden de forma que lo que el usuario visibiliza es simplemente que sólo una de las celdas permite arrastrar la fila.

Espero que este documento te haya sido útil. Si es así, por favor, dale un voto positivo y compártelo en tus redes sociales. Si lo deseas, puedes encontrarme en Twitter y en Linkedin

Software Developer at Sngular. PhD on Immunology, always learning and trying to share knowledge. Microsoft Most Value Professional on Developer Technologies.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store