Drag & Drop
Glisser-déposer
Glisser-déposer permet aux utilisateurs de déplacer, réordonner ou transférer un élément directement. Il doit indiquer quand l'élément est pris et où il peut être déposé.
pointer events + keyboard alternativeUn vrai exemple
Une carte de tâche montre un aperçu quand on l'attrape. Les endroits valides ouvrent un espace, et le lâcher de la carte confirme son nouvel ordre.
Parties principales
- 01Déclencheur
- 02Property change
- 03Timing model
- 04Reduced-motion result
Utilisez-le lorsque
Utilisez-le lorsque déplacer un élément dans l'espace est plus rapide et que le résultat peut être annulé.
Ne l'utilisez pas lorsque
Ne faites jamais du glisser-déposer la seule méthode. Ajoutez un support clavier et des contrôles de déplacement clairs.
Nom utilisé dans le code
pointer events + keyboard alternative Avant d'expédier
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 Glisser-déposer (Drag & Drop). User context: Une carte de tâche montre un aperçu quand on l'attrape. Les endroits valides ouvrent un espace, et le lâcher de la carte confirme son nouvel ordre. Design concept to apply: Glisser-déposer (Drag & Drop). Why it fits: Utilisez-le lorsque déplacer un élément dans l'espace est plus rapide et que le résultat peut être annulé. Do not use it when: Ne faites jamais du glisser-déposer la seule méthode. Ajoutez un support clavier et des contrôles de déplacement clairs. 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): La norme couvre uniquement le champ d'application énuméré. Elle ne choisit ni le style visuel, ni la décision de produit, ni l'exemple de Vibulary. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Glisser-déposer (Drag & Drop) is used now. Definition: Glisser-déposer permet aux utilisateurs de déplacer, réordonner ou transférer un élément directement. Il doit indiquer quand l'élément est pris et où il peut être déposé. 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.