Drag and Drop UX
Drag and Drop UX
8 reglasDrop zone con borde discontinuo y acento al drag-over
La zona de destino debe anunciarse: borde 2px dashed var(--border) en reposo que pasa a var(--accent) con fondo rgba(79,70,229,.08) al detectar drag-over. Sin ese cambio el usuario no sabe si soltar ahí es válido y abandona el gesto a mitad de camino.
Estado dragging: sombra elevada, grabbing y origen al 0.7
El elemento arrastrado se eleva con box-shadow 0 12px 28px rgba(0,0,0,.22) y un leve scale(1.03), el cursor cambia a grabbing, y el hueco original queda como fantasma al opacity:.7. Esa tríada deja claro qué se mueve y de dónde salió.
Snap a grid en kanban con reordenamiento animado
Al cruzar un item por encima de otro, las tarjetas vecinas se desplazan con transform: translateY() en 180ms ease para abrir el hueco. El reflow animado comunica dónde caerá; un reordenamiento instantáneo sin transición desorienta al ojo.
Multi-selección con shift+click y badge de cantidad
Para mover varios items a la vez, shift+click rango y cmd+click individuales; al arrastrar el grupo se apila en un solo objeto con un badge circular de acento mostrando el conteo (3). Arrastrar 5 archivos uno por uno es una fricción que esta convención elimina.
Cancelar drag con Escape o soltar fuera de zona válida
El usuario debe poder abortar: Escape a mitad del arrastre devuelve el item a su origen con una animación de retorno de 220ms, igual que soltar sobre una zona no válida. Un drag que sólo se confirma y nunca se cancela atrapa al usuario en una acción que ya no quiere.
Éxito con animación de snap al destino, nunca teleport
Al soltar en zona válida el item recorre la distancia hasta su posición final con transition: transform 200ms cubic-bezier(.2,.9,.3,1), no aparece de golpe. El teleport rompe la continuidad espacial y obliga a re-localizar visualmente dónde quedó lo que moviste.
Touch drag en móvil: long press de 500ms para activar
En pantallas táctiles el drag arranca tras un long press de 500ms con feedback háptico, no al primer contacto, para no robarle el gesto al scroll vertical. Sin ese delay, deslizar la lista mueve items por accidente y el scroll se vuelve imposible.
Accesibilidad: flechas y Enter como alternativa al gesto
Todo drag debe tener equivalente de teclado: Enter/Espacio toma el item, flechas lo mueven posición a posición con anuncio por aria-live ("movido a posición 2 de 4"), Enter confirma. Un drag exclusivamente de mouse excluye a usuarios de teclado y lectores de pantalla.
- R-608 Drop zone con borde discontinuo y acento al drag-over
- R-609 Estado dragging: sombra elevada, grabbing y origen al 0.7
- R-610 Snap a grid en kanban con reordenamiento animado
- R-611 Multi-selección con shift+click y badge de cantidad
- R-612 Cancelar drag con Escape o soltar fuera de zona válida
- R-613 Éxito con animación de snap al destino, nunca teleport
- R-614 Touch drag en móvil: long press de 500ms para activar
- R-615 Accesibilidad: flechas y Enter como alternativa al gesto