web-dev-qa-db-ja.com

何かをドラッグして並べ替えることができることを示すのに最適なアイコンは何ですか?

私はjquery UI sortableを使用して、htmlテーブルの行をソート可能にしています。ハンドルにアイコンを使用したいのですが、ユーザーがこの要素をドラッグして現在の行を他の行の上または下にドラッグできることを最もよく表す画像/アイコンを見つけようとしています。私のマウスはすでにカーソルを次のように変更しています:

     .handle {
          cursor: move;
      }

ドラッグできることを表すために、画像の重要性を理解しようとしています。

ここにいくつかの提案がありました:

enter image description here

enter image description here

しかし、私がこれらを見るとき、私の本能は上向きまたは下向きの矢印をクリックすることです(これはドラッグするものを表すのですか?)

3
leora

私は通常、このように滑らかな点線の領域を使用します。これは、おおよその指先のサイズ/形状でもあります。

enter image description here

...または同様にグリップ可能な領域を示す3本のバー:

enter image description here

ボタン自体の表面に点描またはエンボス加工のように見えるようにすること、つまり、ボタンを個別の機能やアクションではなく、ボタン全体に接続することです。

ここにドットのクローズアップがあります:

enter image description here

別の一般的なシンボルは、Basecampからのこのスクリーンショットのようなものです。ここで、リストアイテムの左側にあるアイコンは、アイテムにカーソルを合わせたときにのみ表示されることに注意してください。つまり、特定の動作はモバイルでは機能しません。

enter image description here

6
Roger Attrill

簡単にするために、Gmailの例のように縦の点線を使用できます。 enter image description here

3
visualfeaster