Sélection d'éléments dans une zone de liste
J'ai une zone de liste avec beaucoup d'articles comme suit: 
Je souhaite activer la sélection multiple dans cette zone de liste et reporter les éléments de liste sélectionnés dans un compartiment séparé: 
Maintenant, je veux trouver la meilleure façon de sélectionner plusieurs éléments à la fois, deux approches que j'ai pensé sont:
- Utilisez la touche Ctrl du clavier pour sélectionner plusieurs entrées, mais nous devons continuer à le maintenir pendant l'exécution de la tâche.
- Traitez chaque élément comme une entité et un simple clic sur cet élément sélectionnerait et désélectionnerait l'élément, cette approche n'implique pas d'interagir complètement avec le clavier.
Je veux identifier la meilleure approche ou peut-être une approche totalement différente, le cas échéant.
J'appuie ma réponse sur la base de Google - conception de matériaux - modèle de sélection
Appuyez sur un élément sélectionné pour le désélectionner. Appuyez sur un élément non sélectionné pour le sélectionner.
Également sur une longue liste, il est recommandé de montrer à l'utilisateur ce qu'il a déjà sélectionné.
Cela peut être réalisé avec un modèle similaire aux puces de conception de matériaux avec un menu de sélection multiple.
Voici un exemple:
Exemple en direct: puces md avec menu de sélection multiple
Composant Jquery https://select2.github.io/examples.html#multiple le plus souvent utilisé, et il s'adapte aux appareils mobiles Il y a aussi https://harvesthq.github.io/choisi /
Il pourrait être plus sûr de s'en tenir à une interaction plus familière et moins douloureuse (c'est-à-dire en utilisant des cases à cocher).
Le CTRL est réservé au système d'exploitation et le risque de perdre votre sélection est énorme. De plus, il est considéré comme une méthode de raccourci, alors ne vous fiez pas aux utilisateurs qui découvrent votre fonctionnalité cachée.
Je dirais utiliser des cases à cocher et compléter avec la touche Maj pour sélectionner par lots. Donnez également à l'utilisateur des moyens de réduire la liste en utilisant des filtres ou une recherche.