Prioridades de hoyArrastra o usa Espacio y flechas
- Diseño
- Contenido
- Ventas
- Desarrollo
- Admin
Drag to reorder task list
Drag tasks by their handle to sort them while the others glide aside; Space and arrow keys work too.
Settings
Code
<div class="uv-mdr"><p class="hd"><b>Today's priorities</b><small>Drag, or use Space and arrow keys</small></p><ol class="ls"><li><button type="button" class="gr" aria-pressed="false" aria-label="Reorder"><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>Design the cover</b></label><em style="--c:#ec4899">Design</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reorder"><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>Review copy</b></label><em style="--c:#f59e0b">Content</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reorder"><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>Call the client</b></label><em style="--c:#10b981">Sales</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reorder"><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>Ship version 2.1</b></label><em style="--c:#6366f1">Development</em></li><li><button type="button" class="gr" aria-pressed="false" aria-label="Reorder"><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>Prepare invoice</b></label><em style="--c:#64748b">Admin</em></li></ol><p class="sr" aria-live="assertive"></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
A sortable to do list with the feel of a native app. Grabbing a handle lifts the task with a shadow and an accent outline, and the other tasks slide out of the way as it moves. On release the list settles with a short animation, and each task keeps its checkbox and colored tag.
Keyboard users press Space on the handle to pick a task up, move it with the arrow keys and press Space again to drop it, with the new position announced. Everything is plain DOM reordering, so reading the final order is trivial.