Prioridades de hoyArrastra o usa Espacio y flechas
- Diseño
- Contenido
- Ventas
- Desarrollo
- Admin
Liste de tâches à réorganiser par glisser
Glisse les tâches par leur poignée pour les trier pendant que les autres s'écartent ; Espace et flèches aussi.
Réglages
Code
<div class="uv-mdr"><p class="hd"><b>Priorités du jour</b><small>Glisse ou utilise Espace et les flèches</small></p><ol class="ls"><li><button type="button" class="gr" aria-pressed="false" aria-label="Réorganiser"><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>Créer la couverture</b></label><em style="--c:#ec4899">Design</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Réorganiser"><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>Relire les textes</b></label><em style="--c:#f59e0b">Contenu</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Réorganiser"><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>Appeler le client</b></label><em style="--c:#10b981">Ventes</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Réorganiser"><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>Publier la version 2.1</b></label><em style="--c:#6366f1">Développement</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Réorganiser"><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>Préparer la facture</b></label><em style="--c:#64748b">Admin</em></li></ol><p class="sr" aria-live="assertive"></p></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Une liste de tâches triable qui ressemble à une appli native. En saisissant une poignée, la tâche se soulève avec une ombre et un contour d'accent, et les autres s'écartent pendant le déplacement. Au relâchement, la liste se replace avec une courte animation, et chaque tâche garde sa case et son étiquette colorée.
Au clavier, on appuie sur Espace sur la poignée pour prendre la tâche, on la déplace avec les flèches puis Espace la dépose, avec la nouvelle position annoncée. Tout repose sur un simple réordonnancement du DOM, l'ordre final se lit donc facilement.