HTMLの順序付けされた複数選択コントロール
私は高度にカスタマイズ可能なSaaSアプリケーションを開発しています。複数の場所に複数選択があり、場合によってはアイテムの選択に加えて、ユーザーが注文を定義できます。他の場合はそれだけです。重要な選択（順序は、ほとんどの場合、アイテムが後で表示される順序になっています）
当初は2つのリスト（使用可能なアイテム/選択されたアイテム）を使用していましたが、ユーザーはボタンまたはドラッグ＆ドロップを使用してアイテムをリストから別のリストに移動できました。に似ている： 
順序が重要な場合は、右側に追加の上/下矢印ボタンがあり、選択したアイテムの順序を変更できます。
ただし、このコントロールは多くのシナリオで大きすぎたため、アプリケーションの再設計とangularJSへの切り替えにより、はるかに小さなコントロールが見つかりました： http://isteven.github.io/angular-multi-select/ =ここでの問題は、数百のアイテムを持つ1つのユースケースがあり、それらはドロップダウンコントロールには多すぎるように見えることです。また、順序を変更することはできません。したがって、多くのユースケースでエクスペリエンスとレイアウトが改善された理由は、他のユーザーにとっては悪化しました。
私の知る限り、ユーザーを混乱させないために、常に同じコントロール、同じボタンを使用するようにしてください。私たちが見ることができる例はありますか？ angularjs-controlにソートを導入する方法はありますか？または、わずかに異なるユースケースに対して2つの異なるコントロールを用意する必要がありますか？それはせいぜい混乱しませんか？
15〜20年前のクラシックウィザードアプリケーションから最初のコントロールを採用しました。それ以来、誰もより良い解決策を考え出せなかったとは想像できませんが、それでも私はそれを見つけることができないようです。
angularには、多くのオプションがあります。
その1つはUi Sortable Angular libraryです。
https://github.com/angular-ui/ui-sortable
デモ@ http://codepen.io/thgreasi/pen/olDJi
これを右側のリストとして使用できます
StackExchangeのタグエディターと非常によく似た、提案付きの1行のテキストボックスを使用できます。要素はコンマで区切られ、入力を開始すると、一致のリストが表示されます。
このフィールドにモーダルエディター（画面の大部分を使用）をポップアップする[編集...]ボタンを追加します。
これは基本的に、最初の設計と同様に、2つのリストを並べたものにすることができます。私は次の機能を評価します：
- ソースアイテムをフィルタリングするための「フィルター」（何百ものソースアイテムにとって重要）
- 両方のリストで複数選択
- ボタン+ 2つのリスト間をドラッグアンドドロップして、アイテムを追加/削除します（複数選択に対応）
- ボタン+両方のリストでドラッグアンドドロップして、ターゲットリストで並べ替えます（複数選択に対応）
[編集]根拠：短いリストと経験豊富なオペレーターにとって、これはコンパクトで高速な入力を提供します。 「テキストフィールドと編集ボタン」は、新しいユーザーが発見するのに十分一般的です。モーダルウィンドウでは、この特定のタスクに集中できます。長いリストなどの場合、エキスパートユーザーは無制限の表示とすべての高度な編集の必要性をポップアップで見つけます。
ユーザーがリストを手動で並べ替える理由があることを理解しています。
ただし、一部のユースケース（アイテムが数百ある場合を含む）では、自動並べ替えオプションが役立つ場合があります。
並べ替えオプションは
- 左側のリストで、選択した項目のサブセットを選択するためにpriorを使用するには
- 右側のリストで、使用するにはafterサブセットの選択
これにより、ユーザーは意味をなすデータのやり取りの前、最中、および後にデータを取得できます十分に近い希望する最終的な順序にそれらを取得できます-もちろん提供される並べ替えオプションは、ユーザーにとって適切で便利です。
ユーザーがアイテムを最終的なリストに追加するための複数の基準を持っている場合でも、左側のリストの中間の並べ替えオプションにより、データの再編成を繰り返すことができ、関連する上位のアイテムを取り除くことができ、リストの残りの部分。