Drag & Drop
Arrastrar y soltar
Arrastrar y soltar permite a la gente mover, reordenar o transferir un elemento directamente. Debe mostrar cuándo se coge el elemento y dónde puede soltarse.
pointer events + keyboard alternativeUn ejemplo real
Una tarjeta de tarea muestra una vista previa al agarrarla. Los sitios válidos abren un hueco, y soltar la tarjeta confirma su nuevo orden.
Partes principales
- 01Activador
- 02Property change
- 03Timing model
- 04Reduced-motion result
Úsalo cuando
Úsalo cuando mover un elemento en el espacio sea más rápido y el resultado pueda deshacerse.
No lo uses cuando
Nunca hagas que arrastrar y soltar sea el único método. Añade soporte para teclado y controles claros de movimiento.
Nombre usado en código
pointer events + keyboard alternative Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Arrastrar y soltar (Drag & Drop). User context: Una tarjeta de tarea muestra una vista previa al agarrarla. Los sitios válidos abren un hueco, y soltar la tarjeta confirma su nuevo orden. Design concept to apply: Arrastrar y soltar (Drag & Drop). Why it fits: Úsalo cuando mover un elemento en el espacio sea más rápido y el resultado pueda deshacerse. Do not use it when: Nunca hagas que arrastrar y soltar sea el único método. Añade soporte para teclado y controles claros de movimiento. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Arrastrar y soltar (Drag & Drop) is used now. Definition: Arrastrar y soltar permite a la gente mover, reordenar o transferir un elemento directamente. Debe mostrar cuándo se coge el elemento y dónde puede soltarse. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.