Sort – Drag & drop

It works like this:

  1. The user presses the hard key for the options menu.

  2. The Options menu slides into the screen. When the ‘rearrange’ function in the main menu is tapped…

  3. … the drag & drop mode is accessed, that can be identified by a visual target, added to every list item and…

  4. … a button bar with buttons for confirming and canceling the actions at the bottom of the screen.

  5. The user can tap & hold the target, and drag it to a different position on the screen.

  6. When released, the item is dropped at that particular position. The user can tap OK or Cancel to complete the action.

Use when

Your app can use drag & drop for sorting when the order of a list is important and should be customizable. Provide a clear visual target for this gesture. The target is usually located on the right of a list item. Show the actual movement of the item to make clear to the user what is happening. If you want your items to be sorted automatically according to a certain sort-key (such as name or size), consider using a sort-key dialog to sort.

The Good

  • Allows easy and intuitive rearranging of list items

Add Good

The Bad

  • Requires a lot of steps before the actual rearrangement can be made
  • The rearrange touch targets can be easily overlooked
  • Cannot be used without touchscreen (JBM)
  • Hard to rearrange when the list scrolls (Dorival)

Add Bad

Examples

Google stocks

1 Google stocks show a list of stocks. When te menu hard key is pressed...

2 ... the options menu appears. When the 'rearrange' option is selected...

3 ... visual drag & drop targets are displayed on the right of each item.

4 The user can tap & hold a target and drag the item...

5 ... and when released the item is displayed in its new order

HTC Sense Music player playlist

1 A music player playlist contains several list items accompanied by icons. When the user presses the menu hard key...

2 ... the options menu shows the options for this list. When 'change order' is selected...

3 ... visual targets are displayed on the right of each list item.

4 The user can tap & hold an item and drag it towards a new position. When te item is released...

5 ... it is fixed at its new position.

Noodles

1 In Noodles to do list, every item has a drag & drop target by default.

2 When the user taps & holds an item and drags it, the movement of an item is shown in real time and...

3 ... as the item is released, it is put at its new location.

3 Responses to Sort – Drag & drop

  1. Lorenzo says:

    There isn’t any working public implementation of this.

  2. Mykola Nikishov says:

    You’re wrong, the CommonsWare Android Components has a drag-and-drop ListView drop-in replacement http://github.com/commonsguy/cwac-touchist

  3. Carl Bauer says:

    I also have an implementation; found at https://github.com/bauerca/drag-sort-listview

Leave a comment