Comment afficher la double liste en responsive
Je montre une double liste sur l'application Web. Il a une vue de bureau et une vue réactive mobile.
Comme nous savons que nous ne pouvons pas afficher la double liste 2 colonnes côte à côte dans la vue mobile en raison de moins d'espace.
Alors attendons toutes les solutions alternatives ...
Ici, je joins ce que j'ai essayé ...
Ici, je joins un exemple d'écran de bureau:
Comme l'utilisateur veut sélectionner un élément et il peut le déplacer de bas en haut, de haut en bas dans la liste sélectionnée en utilisant les boutons "Haut et Bas" du côté droit.
C'est la raison pour laquelle j'ai approché la double liste.
Il est préférable de fournir la liste "de travail" comme base et d'afficher la liste avec tous les éléments uniquement en cas de besoin. Il y a deux actions que je séparerais et éviterais la confusion entre les deux listes:
- Commander des articles tout en consultant la liste
- Changer le contenu de la liste
Ainsi, au lieu de commencer par ajouter des articles, commencez par l'état actuel de la liste et autorisez les utilisateurs à commander des articles. Pour ajouter ou supprimer des éléments, les utilisateurs accèdent à un deuxième écran où ils ont un aperçu des éléments disponibles et choisissent ce dont ils ont besoin. Dans le cas d'une nouvelle liste, affichez d'abord l'écran d'ajout/suppression, puis la situation sera celle indiquée ci-dessus et illustrée dans l'exemple suivant:
Un écran pour visualiser et ordonner la liste: 
Un écran pour choisir les articles: 
Ne serait-il pas préférable d'afficher l'état sélectionné dans la liste elle-même. De cette façon, vous n'auriez besoin que d'une seule liste qui fournirait à l'utilisateur les informations dont il avait besoin.
Cette solution offrirait des avantages supplémentaires, car il vous suffirait de taper ou de désactiver un élément pour le sélectionner ou le désélectionner et vous pourriez vous déplacer plus efficacement entre les éléments tout en les sélectionnant (sur le bureau, il n'y aurait pas besoin de se déplacer à chaque fois sur les boutons de sélection).
Un autre avantage est que vous pourrez également voir ce qui n'est pas sélectionné beaucoup plus clairement, ce qui n'est pas possible avec une conception à double liste.
Votre liste pourrait ressembler à ceci, où x représente une communication d'état sélectionnée et les éléments de liste eux-mêmes seraient les déclencheurs à bascule. Tous les éléments d'information et d'interaction dans une seule liste:
[x] item 1
[ ] item 2
[x] item 3
[x] item 4
[ ] item 5
[ ] item 6
[x] item 7
Mettre à jour pour refléter la mise à jour de la question.
Vous pouvez toujours le faire dans une seule liste. L'ordre des éléments dans la liste aura toujours la même signification, que les listes soient fusionnées ou non. Vous pouvez par exemple réorganiser la liste ci-dessus comme ceci:
[x] item 1
[x] item 7
[x] item 4
[ ] item 2
[x] item 3
[ ] item 5
[ ] item 6
Rendez simplement les éléments de la liste glissables