1つの軸にドラッグアンドドロップ（並べ替え）-どのカーソル？

Question

リスト間で要素を並べ替える場合など、1つの軸でのみ要素をドラッグするには、どのホバーカーソルが最適かを考えていました。

カーソル：move;矢印が4つあるため、使用できる軸が1つしかないため、誤解を招くおそれがあります。
カーソル：grab;それは良い選択かもしれませんが、そうですか？
カーソル：n-resize;など。cursor：moveのように見えますが、軸が1つしかないため、良い解決策になるかもしれませんが、（名前の略のように）サイズ変更によく使用されます。

あなたの意見は何ですか？

Alvaro · Answer

移動カーソルを使用します。

カーソルは、ユーザーが要素を操作する方法をユーザーに伝える必要があります。

Move cursor：兄弟がいる間に要素を移動できることを示します。
グラブカーソル：要素をグラブできる（ドラッグして移動できる）ことを示します。要素は、スクロールした場合のように、兄弟で取得できます。
N-resize：要素の境界を変位できることを示します。通常、サイズ変更に使用されます。このカーソルはおそらく移動カーソルとして使用されていますが、移動が1つの軸でのみ行われることを示しています。しかし、私が知る限り、このカーソルは要素の動きではなく、そのエッジの動きを示しています。

Deekshit-CUA · Answer

おそらく、カーソル用に独自のカスタムデザインを作成したり、オンラインで利用できるアイコン*（画像/アイコンバンク）を使用したり、CSSプロパティを設定したりできます。 'cursor：copy'も考慮できます。

*画像は著作権で保護されている場合があります。

JonnyZoo · Answer

これらのトピックを処理することで、適切なカーソルを選択できると思います。

1）ユーザーは要素を移動できることを知っていますか？おそらくそれはアクションのタイトル、説明に記載されていますが、おそらく監督されています。したがって、グラブ/移動カーソルがその仕事をするはずです。サイズ変更は誤解を招く可能性があります

2）ユーザーは再注文をしたいですか？これは、並べ替える要素の意味に強く依存します。したがって、それらは整然としており、（1つの軸で）並べ替えることができます。ユーザーが非線形の順序でそれらを配置しようとするかどうかは今はわかりません。なぜ彼は？並列項目のトップ10リストはありません:-)

3）軸が1つしかないことをユーザーに教える必要がありますか？ 2を参照）。人間/ユーザーの心は、アイテムを希望の順序にドラッグアンドドロップできる直線的な順序しかないことを確認するのに十分速いと思います。

私の意見では、これはグラブアイコンにつながります。これは最初のアクション（ドラッグ/グラブ/ピックアップ）で最も直感的であり、ユーザーは2番目のアクション（1つの軸に移動）でこれをどうするかをすばやく確認できます。

SteveD · Answer

グラブおよびグラブカーソルアイコンは1つのソリューションですが、これらはすべてのブラウザで一貫してサポートされているわけではありません。

ただし、移動カーソルは、何かを移動できることを示す正しいカーソルでもあり、すべてのブラウザで一貫しています。この移動カーソルが2軸のクロスを示していることは問題ではありませんが、移動は1つの軸にのみ拘束されます。これは、移動の制約を示すために使用する必要があるドラッグアンドドロップ操作の他の要素があるためです。

ビルスコット＆テレサニールの著書「Designing Web Interfaces」では、最大15のイベントと、少なくとも6つのアクターについて検討する必要があります。

第2章27ページ

イベント：

ページの読み込み-相互作用が発生する前に、ドラッグアンドドロップの可用性を事前に指定できます。

マウスホバー-マウスポインターは、ドラッグ可能なオブジェクトの上に移動します。

マウスダウン-ユーザーはドラッグ可能なオブジェクト上でマウスボタンを押したままにします。

ドラッグ開始-マウスドラッグが開始された後（通常、いくつかのしきい値-3ピクセル）。

ドラッグは元の場所を離れます-ドラッグがその場所またはそれを含むオブジェクトからプルされた後。

ドラッグで元の場所に戻る-オブジェクトが元の場所に再度入るとき。

ドラッグで有効なターゲットを入力-有効なドロップターゲット上にドラッグします。

ドラッグは有効なターゲットを終了します-有効なターゲットの外にドラッグします。

ドラッグは特定の無効なターゲットを入力します-無効なドロップターゲットの上にドラッグします。

ドラッグは特定のターゲット上にありません-有効なターゲットも無効なターゲットもドラッグしません。有効なターゲット外のすべてのエリアを無効として扱いますか？

有効なターゲット上にドラッグホバー-ユーザーはドロップせずに有効なターゲット上で一時停止します。これは通常、ばね式のドロップターゲットが開く場合に発生します。

無効なターゲットの上にドラッグホバー-ユーザーはドロップせずに無効なターゲットの上に一時停止します。手入れする？それが無効である理由について、追加のフィードバックが必要ですか？

ドロップ受け入れ-ドロップは有効なターゲット上で発生し、受け入れられました。

ドロップが拒否されました-ドロップは無効なターゲット上で発生し、ドロップは拒否されました。ドロップしたオブジェクトをズームバックしますか？

親コンテナにドロップ-オブジェクトがドラッグされた場所は特別な場所ですか？通常、これは当てはまりませんが、状況によっては特別な意味を持つ場合があります。

ドラッグアンドドロップ操作のこれらの他の側面は、何ができるか、何ができないかを伝える上で重要な役割を果たすので、カーソルアイコンだけではありません。

MMacD · Answer

アクションがアイテムを新しい位置にドラッグする前にマウスとボタンで「つかむ」ことである場合、ユーザーが持つ最も重要な不確実性は、ユーザーが実際にアイテムを「つかんだ」かどうかです。そのため、フィードバックの質を上げるためにグラブカーソルを使用します。ボタンが押されるまでポインタを押し、ボタンが離されるまでカーソルをグラブします。

物理的な世界でもほとんど同じです。重いもの、滑りやすいもの、壊れやすいものを移動する場合、最大の問題は次のとおりです。しっかりグリップはありますか？