web-dev-qa-db-ja.com

Webページのテーブル行をドラッグ可能にするにはどうすればよいですか?

ユーザーが行を並べ替えられるようにする必要があるWebページにテーブルがあります。ユーザーに行をドラッグして並べ替えさせることを考えていました。しかし、ユーザーがそれを実行できることをユーザーにどのように通知しますか?最初の列に空のセルを作成する必要がありますか。それは、Gmailのような点または縦線のある列を、受信トレイの各メールに設定する必要がありますか?そのような画像はどこで入手できますか?カーソルまたは「移動」カーソルに「グラブハンド」アイコンを使用しますか?テーブルの上にカーソルを置いているときにカーソルを表示しますか、それとも「グラブエリア」だけですか。ユーザーが行の一部をつかんでドラッグできるようにしますか?

12
Adam

37signals ' Basecamp はこれで素晴らしい仕事をします:

Basecamp's drag indicator

アイテムにカーソルを合わせると、コントロールがアイテムの左側に表示されます。コントロールの1つは上/下矢印です。そのコントロールにカーソルを合わせると、マウスカーソルが移動カーソルに変わります。マウスボタンを押したままにすると、グラブされたアイテムの位置が、マウスの位置に対応する垂直軸に移動します。マウスボタンを離すと、最も近い許容可能な位置にアイテムがドロップされます。ドラッグされているアイテムの位置は常に画面上で更新されるため、どこにあるかがわかります。

Gmail tasks drag indicator

GmailのToDoリスト機能では、アイテムにカーソルを合わせると左にドラッグサーフェスが表示されるため、処理方法が少し異なります。ドラッグサーフェスにカーソルを合わせると、カーソルが手のアイコンに変わります(グラブアイコンではなく、閉じた手のアイコンです)。以降の動作はBasecampと同じです。

このパターンの詳細については、Yahooデザインパターンライブラリを参照し、 興味深い瞬間のストーリーボードグリッド を参照してください。

22
Rahul

レイアウトが過密でない限り、ヒントを増やすと、ユーザーはどの機能が利用できるかを理解できます。

したがって、ドラッグハンドルに加えて、「行をドラッグして並べ替える」というキャプションをテーブルの上部近くに追加することをお勧めします。

0
Pierre