Contrôle multi-sélection ordonné en HTML
Je suis en train de développer une application SaaS hautement personnalisable. Elle dispose à plusieurs endroits d'une sélection multiple, dans certains cas, en plus de la sélection des articles, l'utilisateur peut définir une commande, dans d'autres cas, ce n'est que la sélection qui compte. (L'ordre correspond principalement à l'ordre dans lequel les éléments doivent être affichés ultérieurement)
À l'origine, nous utilisions deux listes (éléments disponibles/éléments sélectionnés) où l'utilisateur pouvait déplacer les éléments d'une liste à une autre via des boutons ou glisser-déposer. Semblable à: 
Dans le cas où la commande importerait, il y aurait des boutons fléchés haut/bas supplémentaires sur le côté droit, pour changer l'ordre des articles sélectionnés.
Cependant, ce contrôle était trop grand pour de nombreux scénarios, donc avec la refonte de l'application et le passage à angularJS, nous avons trouvé un contrôle beaucoup plus petit: http://isteven.github.io/angular-multi-select/ = Le problème ici est que nous avons un cas d'utilisation avec plusieurs centaines d'articles, et ceux-ci semblent être trop nombreux pour un contrôle déroulant. De plus, il n'est pas possible de modifier la commande. Alors pourquoi l'expérience et la mise en page se sont améliorées pour de nombreux cas d'utilisation, elles ont empiré pour d'autres.
Maintenant, autant que je sache, vous devriez essayer d'utiliser toujours les mêmes commandes, les mêmes boutons, afin de ne pas dérouter l'utilisateur. Y a-t-il des exemples que nous pourrions examiner? Une idée de comment nous pouvons introduire le tri dans le contrôle angularjs? Ou devrions-nous simplement avoir 2 contrôles différents pour des cas d'utilisation légèrement différents? cela ne sera-t-il pas déroutant au mieux?
Nous avons pris l'idée du premier contrôle à partir des applications d'assistant classiques qui ont 15-20 ans. Je ne peux tout simplement pas imaginer que personne n'a proposé de meilleure solution depuis, mais je ne semble toujours pas en trouver une.
Avec angular il y a beaucoup d'options.
L'un d'eux est Ui Sortable Angular library
https://github.com/angular-ui/ui-sortable
démo @ http://codepen.io/thgreasi/pen/olDJi
Vous pouvez l'utiliser comme liste de droite
Vous pouvez utiliser une zone de texte d'une ligne avec des suggestions, très similaire à l'éditeur de balises de StackExchange: les éléments sont séparés par des virgules, commencer à taper affichera une liste de correspondances.
J'ajouterais un bouton "éditer ..." qui fait apparaître un éditeur modal (utilisant la majorité de la succession d'écran) pour ce champ.
Cela pourrait être essentiellement les deux listes côte à côte, comme dans votre conception initiale. J'apprécierais les fonctionnalités suivantes:
- un "filtre" pour filtrer les éléments source (important pour des centaines d'éléments source)
- sélection multiple dans les deux listes
- boutons + glisser-déposer entre les deux listes pour ajouter/supprimer des éléments (respecte la multi-sélection)
- boutons + glisser-déposer dans les deux listes pour les réorganiser dans la liste cible (respecte la multi-sélection)
[modifier] Justification: Pour les listes restreintes et les opérateurs expérimentés, cela fournit une entrée compacte et rapide. "Champ de texte plus bouton d'édition" est suffisamment courant pour que les nouveaux utilisateurs puissent le découvrir. La fenêtre modale permet de se concentrer sur cette tâche particulière. Pour les longues listes, etc., les utilisateurs experts trouveront un affichage illimité et tous les besoins d'édition avancés dans la fenêtre contextuelle.
Je comprends que l'utilisateur peut avoir des raisons de trier manuellement une liste.
Cependant, il semble que certains cas d'utilisation (y compris celui avec des centaines d'articles) puissent bénéficier des options de tri automatique.
Les options de tri peuvent être
- sur la liste de gauche, pour utiliser avant pour choisir un sous-ensemble d'éléments sélectionnés
- dans la liste de droite, pour utiliser après choisir un sous-ensemble
Cela permet à l'utilisateur de donner un sens des données avant, pendant et après avoir interagi avec elles, et peut les obtenir assez près à leur ordre final souhaité - en supposant bien sûr que les options de tri fournies sont pertinentes et utiles pour l'utilisateur.
Même si l'utilisateur a plusieurs critères pour ajouter des éléments dans la liste finale, les options de tri intermédiaires sur la liste de gauche permettent une réorganisation répétée des données afin de pouvoir supprimer les éléments supérieurs pertinents sans avoir à gérer le bruit de le reste de la liste.