I have a table on a web page where I need to let the user reorder the rows. I was thinking of letting the user drag the rows to reorder them. But how would I let the user know that he could do that? Should I make an empty cell as the first column with dots or vertical lines like gmail has for each email in the inbox? Where can I get an image like that? Do I use a "grabbing hand" icon for the cursor or a "move" cursor? Do I show the cursor while hovering over the table or just the "grab area"? Do I let the user grab any part of the row to drag?


2 Answers 2


37signals' Basecamp does a great job with this:

Basecamp's drag indicator

When hovering over an item, controls appear to the left of the item. One of the controls is an up/down arrow. When hovering over that control, the mouse cursor changes into a move cursor. Holding down the mouse button moves the position of the grabbed item on the vertical axis corresponding with the position of the mouse. Releasing the mouse button drops the item in the nearest acceptable position. The position of the item being dragged is constantly updated on the screen so you know where it is.

Gmail tasks drag indicator

Gmail's Tasks feature handles it a bit differently by showing a drag surface to the left when you hover over an item. Hovering over the drag surface changes the cursor into a hand icon (not a grab icon, which is a closed hand). Further behaviour is identical to Basecamp.

For more information on this pattern, consult the Yahoo Design Pattern Library and refer to the interesting moments storyboard grid.

  • 5
    +1 for the "drag handle" approach (ala Gmail). The icon with the arrows in the first example is the kind of visual metaphor I would use for resizing -- not reordering. Commented Sep 1, 2010 at 21:36
  • I like the Basecamp method, but it is best used on vertical lists of items because the icon points up and down. A traditional drag surface applies to a less restricted drag and drop, but it isn't as obvious what it does. I believe the most important part is the cursor change. It is easier for the user to notice their cursor changing shapes as they move around than for them to recognize what a few dots or some other icons mean. Commented Sep 1, 2010 at 21:51
  • @LoganGoesPlaces Yeah. I posted these examples because the question is about reordering rows in a table, which implies the vertical constraint.
    – Rahul
    Commented Sep 1, 2010 at 22:02
  • 1
    Oh it's definitely a +1, great answer!
    – Dan Barak
    Commented Sep 1, 2010 at 22:08
  • Thanks! Does anyone have either of those "grab" images?
    – Adam
    Commented Sep 1, 2010 at 23:53

As long as your layout is not overcrowded, multiplying the hints does help users figure out what features are available.

In addition to the drag handles, you might therefore want to add a "Drag rows to reorder" caption near the top of your table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.