Todo App
El reto principal
Arrastrar y soltar es de esas cosas que parecen un detalle hasta que las implementas. Hay que mantener el orden real de los datos, animar el hueco que deja el elemento arrastrado, y que todo eso siga funcionando cuando hay un filtro activo y la lista en pantalla no es la lista completa.
Con un filtro activo, los índices que reporta el arrastre son los de la lista visible, no los del arreglo completo. Aplicarlos tal cual reordenaba las tareas equivocadas. Hubo que traducir el índice visible al índice real antes de mover nada, y aceptar que reordenar con un filtro puesto es una operación ambigua: lo más honesto fue deshabilitar el arrastre mientras hay filtro.
Qué aprendí
A veces la solución correcta a una interacción ambigua es no ofrecerla. Bloquear el arrastre bajo filtro es menos código y menos confuso que inventar una regla que el usuario tendría que adivinar.
- El índice de la vista y el índice del modelo no son el mismo número en cuanto hay un filtro
- La persistencia en
localStoragehay que leerla con cuidado: puede estar corrupta o venir de otra versión - El arrastre necesita una alternativa por teclado si va a ser accesible de verdad
- React
- react-beautiful-dnd
- CSS
- GitHub Pages