グリッドで、手動で行を並べ替える方法は？
ユーザーがグリッドで要素を並べ替えられるようにしたい-列で自動並べ替えを行わない。最初の要素、次の要素などを選択します。
私は考え、ケースに応じて機能するかもしれないいくつかの解決策を見ました：
- ドラッグアンドドロップ：セクシーですが、スクロールやページングのある長いグリッドでは機能しません。もう1つの欠点は、それが見えないことです。この機能が利用できることさえ知らないかもしれません。最後に、ある程度の器用さが必要です。ただし、一度に複数の要素を移動するために使用できます。
- 上/下矢印：理解しやすく、小さな移動にも使いやすいですが、最初の要素で最後の要素を移動する必要がある場合は退屈です。また、要素を数ステップ移動するときは、1回移動するたびにその矢印をキャッチする必要があります。一度に1つの要素でのみ機能します。
- インデックス列：ユーザーは要素の位置を示す数値を入力します。ユーザーが希望する絶対位置を知っている場合に役立ちます。既存の番号を入力するとどうなるか推測が難しい。一度に1つの要素でのみ機能します。
インデックス列+ドラッグアンドドロップのようなこれら2つの手法を組み合わせたくなりますが、両方の利点を得るのではなく、両方の欠点を累積することを恐れています。
動作することが証明されている並べ替え手法は何ですか？
Netflixは、キューに3つのメソッドを組み合わせています。ドラッグアンドドロップするだけでなく、特定の行番号を指定するか、クリックして最上部に移動することもできます。
彼らのアプローチについて私が興味深いと思うのは、ユーザーが選択してページの上部のどこかをクリックする必要があるのではなく、「行」の上部にある緑色の円のアイコンを各行に配置したことです。ほとんどのWebアプリはそのようなアイコンやボタンを配置します。
あなたの場合、私はドラッグアンドドロップを使用しますが、すべての行に歯車のアイコンを配置します。
これにより、いくつかのアクションが許可されます。
ユーザーは1つ以上の行をドラッグアンドドロップできます
ユーザーは複数の行を選択し、歯車アイコンをクリックしてメニューをドロップダウンし、任意の数のことを実行できます。選択範囲を上または下に移動、指定した行数を上下に移動（この場合、小さなダイアログが表示されます）、コピー、切り取りなど。実質的に制限なし。
それを行う方法を理解しようとする前にまず自問する必要があるのは、ユーザーがそれを行う頻度です。
頻繁に使用する場合は、ユーザーが特定のしきい値に到達したら、ドラッグアンドドロップを使用してページを自動スクロールするように作成します。
経験則として、ユーザーが頻繁に何かをする必要があり、エキゾチックな種類のインタラクションを導入しても簡単にできる場合は、そうすることをお勧めします。ユーザーは後で学習するため、学習曲線に問題はありません。
それが頻繁に使用されない場合は、上向き/下向き矢印を使用します。それは終了していない可能性がありますが、それは明らかです。
上/下矢印とドラッグ＆ドロップを組み合わせます。
いくつかの数値を推測したり、事前に計算したりすることは、非常に面倒です。また、衝突はコード内で処理でき、たとえば、入力された数値以上のすべての数値をインクリメントすることで対処する必要がありますが、ほとんどのユーザーは、重複または間違った番号が処理されます。
上向き矢印と下向き矢印は、短い距離で並べ替えるより便利な方法です。
距離が長い場合や複数のアイテムを移動する場合は、ドラッグアンドドロップを追加できます。ドラッグアンドドロップを1ページ以上の距離で使用できるようにするには、グリッドの自動スクロールも実装する必要があります。つまり、ドラッグ操作中に、グリッドの上または下の境界線の特定のマージン内でマウスをドラッグすると、グリッドが自動的にスクロールします。これはまさにWindowsエクスプローラーが行うことです。
これをさらに強化するために、ドラッグが「スクロール依存」領域に留まると、スクロール速度が遅くなり、増加する可能性があります。ただし、これには注意してください。さらに、最大スクロール速度を設定します。自動スクロールが非常に高速または非常に高速になり、常に必要な場所を超えてスクロールしてしまったため、怒りに駆られました。
Drupal CMSには、30から50の項目のリストにスケーリングする、これに対する比較的優れたソリューションがあります。それがどのように高くなるかはわかりません。
サイトの「ブロック」の構成は一例です-以下のスクリーンショットを参照してください。
- 各アイテムには4方向ハンドルがあり、ドラッグアンドドロップ操作で取得できます。
ハンドルは、アイテムをドラッグできる視覚的な「アフォーダンス」を提供します。 - リストはセクションに分かれています。
アイテムを特定のセクションに移動するには、そのアイテムに対して表示されているコンボボックスからアイテムを選択します
「ドラッグアンドドロップ」アプローチは、項目を1ステップ移動する矢印を使用するよりもはるかにスムーズです。 [〜＃〜] jira [〜＃〜] はそれを実行し、物事を適切な場所に配置するのは非常に困難です。
これは、ユーザーがシステムをどのように使用しているかによって異なります。
行番号が意味がある場合（たとえば、キュー内の位置）、おそらくそれを表示して編集可能にする必要があります。
「これを最初に作成」が一般的なアクションである場合は、「上に移動」ボタン（または下に移動）を導入することができます。
キーボードショートカットのようなユーザーが上下のショートカットを追加する場合は、行が移動するときに選択/フォーカスが行に追従することを確認してください。
上/下ボタンを追加できますが、私のユーザーはそれらをあまり好きではありません（ユーザーは異なる場合があります）
そして最後に、ドラッグアンドドロップ、私のユーザーが行を並べ替えるお気に入りの方法-アプリにはドラッグハンドルがなく、ユーザーはうまくドラッグアンドドロップできます（ユーザーは異なる場合があります）
そして、あなたが何をするにしても、それを特定のユーザーでテストし、彼らがどのようにそれを好むかを確かめてください。