Prioridades de hoyArrastra o usa Espacio y flechas
- Diseño
- Contenido
- Ventas
- Desarrollo
- Admin
Aufgabenliste zum Umsortieren per Ziehen
Zieh Aufgaben am Griff an ihren Platz, die anderen weichen sanft aus; Leertaste und Pfeile gehen auch.
Einstellungen
Code
<div class="uv-mdr"><p class="hd"><b>Heutige Prioritäten</b><small>Ziehen oder Leertaste und Pfeiltasten</small></p><ol class="ls"><li><button type="button" class="gr" aria-pressed="false" aria-label="Neu ordnen"><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>Cover gestalten</b></label><em style="--c:#ec4899">Design</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Neu ordnen"><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>Texte prüfen</b></label><em style="--c:#f59e0b">Inhalt</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Neu ordnen"><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>Kunden anrufen</b></label><em style="--c:#10b981">Vertrieb</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Neu ordnen"><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>Version 2.1 hochladen</b></label><em style="--c:#6366f1">Entwicklung</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Neu ordnen"><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>Rechnung vorbereiten</b></label><em style="--c:#64748b">Verwaltung</em></li></ol><p class="sr" aria-live="assertive"></p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Eine sortierbare Aufgabenliste mit dem Gefühl einer nativen App. Wer einen Griff packt, hebt die Aufgabe mit Schatten und Akzentrahmen an, und die anderen Aufgaben gleiten beim Bewegen zur Seite. Beim Loslassen ordnet sich die Liste mit kurzer Animation, und jede Aufgabe behält Kontrollkästchen und farbiges Etikett.
Per Tastatur drückt man die Leertaste auf dem Griff, verschiebt mit den Pfeiltasten und lässt mit erneuter Leertaste los, wobei die neue Position angesagt wird. Alles ist normales Umordnen im DOM, die Reihenfolge lässt sich also leicht auslesen.