lists - In a grid, how to manually reorder rows?

I wish to let my users reorder elements in a grid - not do automatic sorting on a column. They select which element is the first, which one comes after the other, etc.

I thought of and saw some solutions that might work depending on the case:

• Drag and drop: sexy but doesn't work for long grids with scrolling or paging. Another drawback is that it is invisible, you may not even know this functionality is available. Finally some dexterity is required. However it can be used to move more than one element at a time.


• Up/down arrows: understandable and easy to use for small moves, but boring when you have to move the last element at the first place. Also when you move an element a few steps, you have to catch that arrow after each single move. Works only on one element at a time.


• An index column: the user enters a number indicating the element's position. Useful when the user knows the desired absolute position. Difficult to guess what will happen if an already existing number is entered. Works only on one element at a time.

I am tempted to combine two of these techniques like the index column + drag & drop, but I'm afraid to cumulate the drawbacks of both instead of having the benefits of both.

What are the reordering techniques that have proven to work?

Answer

Netflix combines three methods in their queue. You can drag-and-drop, but also specify a particular row number, or click to move it to the very top:

What I find interesting about their approach is that they have put the "Top" icon (circled in green) right there on each row, as opposed to requiring the user to make a selection and then click somewhere at the top of the page, where most web apps put such icons or buttons.

In your case, I would use drag-and-drop, but would put a gears icon on every row:

This would permit several actions:

• 
  

  The user can drag-and-drop one or more rows

  
  
  


• 
  

  The user can select multiple rows, then click on the gears icon to have a menu drop down and perform any number of things, e.g. move selection to the top or bottom, move selection a specified number of rows up or down (in which case a tiny dialog appears), copy, cut, etc. Virtually no limit.