La tarea parecía de media tarde: una lista de tareas que se reordena arrastrando. Es un panel interno de un cliente, así que el componente va lleno de su modelo de datos: sus nombres de campo, sus estados, su flujo de aprobación. Nada secreto de película, pero nada que sea mío para andar pegándolo por ahí.
Y salió el clásico. Arrastrar hacia arriba, perfecto. Arrastrar hacia abajo, el elemento aterrizaba siempre una posición antes de donde lo soltabas. Uno mira el código de drag, mira los eventos, mira el dataTransfer… y no está ahí.
Tres líneas, y de las que no ves
La función era la de siempre: un splice para sacar el elemento, otro splice para meterlo en el destino.
En cuanto sacas el elemento del array, todos los índices posteriores se desplazan uno. Hacia arriba da igual. Hacia abajo, tu índice de destino ya no significa lo que creías.
Lo primero fue sacar la lógica del componente. Le pedí a la IA que escribiera una función pura, reorder(lista, desde, hasta), sin DOM ni eventos, y —esto es lo que de verdad ahorra la tarde— que me montara la tabla de casos límite antes de tocar la interfaz:
- mover el primero al último y el último al primero
- soltar un elemento en el sitio donde ya estaba
- índices fuera de rango o iguales
- lista de un solo elemento, lista vacía
Con eso delante, el ajuste del desplazamiento deja de ser adivinanza y pasa a ser una condición que o cumple los catorce casos o no los cumple.
Lo que apareció después
Ya puestos, la pregunta incómoda: ¿y quien no arrastra? Un reordenable solo con ratón deja fuera a cualquiera que use teclado. Ahí la ayuda fue directa: mover con Alt más flechas, un aria-live que anuncia «movido a la posición 3 de 7», y pointer events en vez de mouse events para que el táctil no se quede mirando. Nada de esto es difícil; es que no se te ocurre cuando llevas una hora peleándote con un off-by-one.
Por qué esto se escribió sin salir del navegador
El prompt llevaba el componente entero. Con los nombres reales, el estado real y el comentario de por qué ese cliente no permite reordenar tareas ya aprobadas. Podría haberlo anonimizado antes de mandarlo a un servicio, sí, y ahí está el chiste: anonimizar es exactamente lo que empeora las respuestas. Cambias los nombres, quitas el contexto, y recibes un ejemplo genérico con items y foo que no encaja con nada.
Trabajando en local pegas el fichero tal cual, con su mugre. Y no hay que abrir el contrato del cliente para comprobar qué pone sobre servicios de terceros, porque no hay terceros: el modelo corre en la GPU de tu equipo y el código no cruza ninguna red.
La función pura acabó teniendo doce líneas. La tabla de casos, cuarenta. Sospecho que ese reparto dice algo.
Abre Elffuss Code y pégale el componente entero, con nombres reales y todo: la IA corre en tu navegador, así que no se sube nada a ningún sitio.
Abrir Code →