Drag handle

A drag handle answers a question the interface cannot otherwise answer: can this be moved, and if so, from where. Dragging leaves no trace until it starts, so a row that is reorderable looks exactly like a row that is not. The dots are the sign, and they are drawn in the same place on every row so that the eye finds the column once and stops looking.

Restricting the drag to the handle is the point, not a limitation. If the whole row is draggable, then selecting the text in it, tapping a link inside it, and scrolling a list of them on touch all collide with the gesture, and the reader loses ordinary abilities to gain one. With a handle, dragging the label still selects the label, which is what everyone expects text to do, and the list still scrolls under a finger.

The mark is a few pixels of dots, and the target must not be. Give the handle a hit area of at least the platform’s minimum, usually around forty-four pixels square, centred on the dots. Give it a real button with a name that says what it moves (“Reorder Ember”), because a handle is a control: a gesture-only affordance is a gesture-only feature, so the same reorder has to be reachable by keyboard, whether that is arrow keys while the handle is focused or a move item in a menu.

Two words sit next to this one. Material calls the mark a drag indicator, and the grabber is the horizontal bar at the top of a sheet, which is the same idea drawn for a surface rather than for a row. Both are separate from drag and drop, which names the whole interaction: the handle is only where it may begin.