リストから複数のサブセットにアイテムを選択するための直感的なHTMLインターフェイスとは何ですか？
一部のアイテムが未確定のサブセットに分類されるアイテムのリストを取得しました。アイテムは最大1つのサブセットに含めることができます。アイテムがサブセットにならない場合があります。
常に最大1つのサブセットがある場合は簡単です。 （リスト内のアイテムの数まで）より多くある可能性があるため、それはより困難になります。誰かが私に良い例を指摘できますか？
編集：簡単にするために、ユーザーにはアイテムの長いリストが表示されます。ユーザーは、それらのいくつかを別々のグループにまとめたいと思うでしょう。リスト内の各項目は、グループ化されている場合とされていない場合があります。アイテムがグループに配置される場合、そのアイテムを別のグループに配置することはできません。 （または別の言い方をすると、リスト内のアイテムは0または1つのグループにのみ存在できます）。
説明している最も一般的な例はファイルシステムです。
私の洗濯物を山に分けるときあなたが説明しているように聞こえます。白、黒、色を入れたい服の山があります。それを行うために、私は3つの山を持ち、アイテムを1つずつ取り、それを山に追加します。
その思考プロセスは、ウェブページ上で表現するのがいくらかトリッキーですが、私はGoogle Plusが非常にうまくいくと思います。事実上、画面の半分が2つあります。半分には、現在グループに属していないアイテムのリストが含まれています。複数を選択し、一度に1つを選択解除できるようにする必要があります（Google+が提供する「再選択」オプションは、命を救うボーナス機能です！）。次に、それらを画面のもう半分のグループに向かってドラッグし、配置したいグループの上にドラッグします。ホバーに関する十分なフィードバックがあり、タスクが正常に実行されると確信できます。
画面の一部に表示できるほど十分な数のグループが存在しない状況では、作品は問題ありません。例えば。ほとんどの人のためのGoogle+のサークル。
このアプローチにより、ユーザーはどのアイテムがまだグループに割り当てられていないかを認識しています。だから、物事のその側はうまくいくはずです。
全体として、Google +は良い例です。しかし、UIをうまく機能させるのは難しい。幸運を！
ドラッグアンドドロップインターフェイスを使用して、アイテムを個別のリストにソートできるようにします
jQuery UI Sortable plugin の場合、サブセットごとに1つの順序付けられていないリストを使用し、 this demo： に示すようにすべてのサブセットをリンクします。
（上記のモックアップにヘッダーを追加しましたが、それ以外のコードはjQuery UIデモとまったく同じです。）
これはGoogle+ Circlesインターフェースの「貧乏人」バージョンですが、実装は多少簡単であり、ユーザーはそれに慣れている可能性があります（少なくとも、より多くのユーザーがGoogle+を経験するまで）。実装にはいくつかのアプローチがあります。
- 最初にすべてのアイテムをサブセット1に配置してから、「アイテムを正しいグループにドラッグアンドドロップする」ようにユーザーに求めます。
- アイテムをランダムに複数のサブセットにソートしてから、同じ命令を含めます。
- サブセットより上のすべてのアイテムを「ソートされていない」グループに配置し、ユーザーにソートを促す（Google+がCirclesインターフェースで行うこと）。
いずれの場合も、ドロップターゲットに色を付けて非常にわかりやすくし（サブセットが空のときに「ここにドロップ」テキストを含めることもできます）、訪問者がタッチスクリーンを使用している場合はドラッグアンドドロップウィジェットを完全に省略することを検討してください。