Sort – Drag & drop
It works like this:
-
The user presses the hard key for the options menu.
-
The Options menu slides into the screen. When the ‘rearrange’ function in the main menu is tapped…
-
… the drag & drop mode is accessed, that can be identified by a visual target, added to every list item and…
-
… a button bar with buttons for confirming and canceling the actions at the bottom of the screen.
-
The user can tap & hold the target, and drag it to a different position on the screen.
-
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
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)
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
There isn’t any working public implementation of this.
You’re wrong, the CommonsWare Android Components has a drag-and-drop ListView drop-in replacement http://github.com/commonsguy/cwac-touchist
I also have an implementation; found at https://github.com/bauerca/drag-sort-listview