<?xml version="1.0"?>

<pattern collection="welie" patternID="sorting" xmlns="http://www.welie.com/plml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.welie.com/plml.xsd">

<name>Sorting</name>
<author>Martijn van Welie</author>
<problem>The users need to sort a list of items manually
</problem>

<illustration>
<img src="images/sorting-yahoo.png" border="1"/><br/>
From <a href="http://www.yahoo.com/">www.yahoo.com/</a>
<br/>
</illustration>

<context>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 <pattern-link patternID="list-builder"/>. Now they need to sort the items based on personal judgement. Users want to see the current order at all time.
</context>


<pattlet>Allow the users to select one or more items and to move them to the new location.
</pattlet>


<solution>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. 
<br/><br/>
Moving items can also be done by dragging and dropping. In this case, an item is selected and dragged to the new position.
</solution>

<rationale>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.
</rationale>

<example><br/>
<img src="images/sorting-yahoo-images-small.png" border="1"/>
</example>

<uses><a href="http://www.yahoo.com">www.yahoo.com</a>;
</uses>

<references>This pattern can be used together with other list related patterns such as the <a href="list-builder.html">List Builder</a> pattern.
</references>
</pattern>

