Practical guides

Reorder items without relying on drag and drop

Drag and drop moves a file, card or list item. The gesture may be difficult or impossible depending on the device and person. A usable journey also offers an understandable way to achieve the same result.

Go to the method

Laptop, phone and open notebook on a white table
Illustration

Describe the operation before the gesture

Separate reordering, moving between groups, copying and attaching a file. Their consequences differ. A document order needs to be expressible without depending on a pointer trajectory.

Choose controls such as Move up, Move down or Move to according to context. Name the item and explain boundaries: list start, prohibited group or denied movement. A long list may need destination selection instead of dozens of button presses.

Support keyboard and pointer without dragging

The W3C criterion on dragging movements calls for a pointer alternative without dragging outside its defined exceptions. Keyboard operation is a complementary check: a keyboard alternative alone does not solve pointer-gesture difficulty.

Visible buttons can support both uses when actions are simple. A file-selection button complements a drop area. Test the alternatives directly rather than starting with the gesture being avoided.

Align position, focus and saving

After movement, focus should remain on a useful control associated with the item and the new position should be understandable. Avoid disagreement between visual and reading order. At a boundary, explain the limit without sending focus somewhere unexpected.

Distinguish provisional and recorded order. Failed saving needs recovery or return to the previous state. Include another user changing the list. Local success must not imply service acceptance when the server rejected the update.

Example: arrange a record’s documents

Educational example: five documents have Move up and Move down commands; Save confirms order. Testing moves the last into second position, checks focus, reloads after saving and simulates failure. Compare document identifiers rather than names, which may repeat.

Content updated on October 7, 2026

Acceptance matrix to adapt to your project

These proposed checks use synthetic cases. Decide the required behaviour with the team, record the result and assign unresolved gaps before release.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

Test cases, expected outcomes and useful evidence
CaseExpected outcomeEvidence to retain
Pointer without draggingMovement completes through simple clicksAlternative and outcome
KeyboardItem and new position remain identifiableFocus and resulting order
List boundaryThe limit is understandableControl and displayed state
Failed savingThe interface does not claim recorded orderLocal order, response and recovery

Frequently asked questions

Is a keyboard alternative sufficient?

It supports keyboard use, but dragging also needs a pointer alternative without dragging when the applicable criterion requires it. Buttons may serve both.

Can drag and drop remain available?

Yes, as an additional method, when other paths provide the same operation and coherent states.

Must new order save immediately?

Either model can work. Say whether changes are provisional or saved and prepare failure handling.