Prioridades de hoyArrastra o usa Espacio y flechas
- Diseño
- Contenido
- Ventas
- Desarrollo
- Admin
Lista de tareas que se reordena arrastrando
Arrastra las tareas por el asa para ordenarlas mientras las demás se apartan; también con Espacio y flechas.
Ajustes
Código
<div class="uv-mdr"><p class="hd"><b>Prioridades de hoy</b><small>Arrastra o usa Espacio y flechas</small></p><ol class="ls"><li><button type="button" class="gr" aria-pressed="false" aria-label="Reordenar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button><label><input type="checkbox"><b>Diseñar portada</b></label><em style="--c:#ec4899">Diseño</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reordenar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button><label><input type="checkbox"><b>Revisar textos</b></label><em style="--c:#f59e0b">Contenido</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reordenar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button><label><input type="checkbox"><b>Llamar a cliente</b></label><em style="--c:#10b981">Ventas</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reordenar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button><label><input type="checkbox"><b>Subir versión 2.1</b></label><em style="--c:#6366f1">Desarrollo</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reordenar"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg></button><label><input type="checkbox"><b>Preparar factura</b></label><em style="--c:#64748b">Admin</em></li></ol><p class="sr" aria-live="assertive"></p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Una lista de tareas ordenable que se siente como una app nativa. Al coger un asa, la tarea se eleva con sombra y un borde de acento, y las demás se apartan mientras se mueve. Al soltarla la lista se recoloca con una animación corta, y cada tarea mantiene su casilla y su etiqueta de color.
Con teclado se pulsa Espacio en el asa para coger la tarea, se mueve con las flechas y se vuelve a pulsar Espacio para soltarla, con la nueva posición anunciada. Todo es reordenación normal del DOM, así que leer el orden final es inmediato.