List Sorter


The users need to sort a list of items manually


Allow the users to select one or more items and to move them to the new location.


Use when

The users are faced with a list of items. It may have been generated but they could also have built it themselves, for example using a List Builder. Now they need to sort the items based on personal judgement. Users want to see the current order at all time.


Present the list together with up and down buttons. By selecting an item and pressing the up or down button, the item can be moved. Effectively it swaps its place with the item above or below it when it is moved. By selecting several items, users can move a small set of items to a new place. In addition, buttons for the top or the bottom of the list could be used to more items to those special positions.

Moving items can also be done by dragging and dropping. In this case, an item is selected and dragged to the new position.


The users are presented with the entire list in the current order. By moving items they immediately see the new order of items. Repeated selection and moving leads to a sorted list.

More Examples

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below