Re: User Interface - Arranging a list in HTML

[BrowserUk]

in reply to User Interface - Arranging a list in HTML

One way Ive seen this sort of thing done is to use to (multi) SELECT GROUPS side by side and two buttons

The user highlights one (or more) items in the left list and clicks the top button the form is submited and this elements are moved (in there existing order) from the left list to the right list.

If they make a mistake, they can hightlight the error in the right list and use the lower button to move it back to the left.

A third button is used to indicate that they are happy with the order.

+-----------------------+             +-----------------------+
|Item 01                |             |                       |
|Item 02                |  +------+   |                       |
|Item 03                |  | >>>> |   |                       |
|Item 04                |  +------+   |                       |
|Item 05                |             |                       |
|Item 06                |             |                       |
|Item 07                |  +------+   |                       |
|Item 08                |  | <<<< |   |                       |
|Item 09                |  +------+   |                       |
|Item 10                |             |                       |
|Item 11                |             |                       |
|Item 12                |             |                       |
|Item 13                |             |                       |
|Item 14                |             |                       |
|Item 15                |             |                       |
|Item 16                |             |                       |
|Item 17                |             |                       |
|Item 18                | +--------+  |                       |
|Item 19                | | Submit |  |                       |
|Item 20                | +--------+  |                       |
+-----------------------+             +-----------------------+

---

Nah! You're thinking of Simon Templar, originally played (on UKTV) by Roger Moore and later by Ian Ogilvy

[oakbox]

I thought about this one, but if a user is down around item 17 and suddenly decides that items 3 and 4 need to be flipped, they have to 'unload' all of the items from 3 down and then 'reload' all items below it.

I know this question is a bit off topic, but I've run into this problem many times in web design projects and I haven't found a good way to address it yet.

oakbox

[BrowserUk]

Not necessarially. If the user selects an item in the right list and one or more in the left list, then the items from the left list are inserted below the selected item in the left list.

In your example of swaping items 3 & 4 in the right list, it becomes a two step process.

1. Select item 3 in right list, click "move left" button.

   The screen is re-drawn with item from position 3 at the bottom of the left hand list.

2. Select the bottom item in the left list, select the third item in the right list, click "move right".

   The list is re-drawn with the previously third item moved below the previously 4th item.

   The rest of the list remains in situ.

It's actually much harder to describe than do, but I guess that's one reason for not using it. Indicating how to use it to your average (impatient) user.

You can also code the logic of the switching from one to the other into javascript associated with the buttons if server hits is a concern, and you can guarentee your users will have js turned on. You could even get clever and have the buttons use javascript if available or submit to the server if not. Just a thought:)

---

Nah! You're thinking of Simon Templar, originally played (on UKTV) by Roger Moore and later by Ian Ogilvy