Best ways to allow users sorting items ?

[chros]

Yesterday I have suggested someone that allow to sort items to a user, based upon eg. the order preporty of the item (which is a number). It has sticked in my mind, and I'm corious about what is the best way to acomplish this.

(Of course the list can be very long) Eg.:
Item1 1
Item2 3
Item3 2

The best way could be drag and drop, but I don't know if it widely supported by browsers, and if it's how to do it.

Thanks

[djr33]

You posted this in the html forum. This is probably a javascript issue, maybe with some dhtml and/or php. Depends...

So... I don't quite get what you mean. You actually want to have the user input choices?

You could fairly easily use a form and have php interpret it... then send them back as ranked...

Why are you doing this? It'll help to figure out how the data is sent to the next step.

[chros]

You posted this in the html forum. This is probably a javascript issue...
You are right, I didn't know where to post... Maybe it's javascript related, but I'm not sure. Maybe someone move this post ...


So... I don't quite get what you mean. You actually want to have the user input choices?

You could fairly easily use a form and have php interpret it... then send them back as ranked...
The further processing in not important (besides it's php based):
The user can reorder the list items. Suppose that the list contains 20 (or more) items.
1 (painful) way is using textboxes: where each item has a 2 character-width textbox (so max itemnuber 99), and then he must reassign the proper (!) order number.

The purpouse is that these items are being displayed in the selected order.

[djr33]

The more items you have, the more complex it'll be.

Text boxes is a bad idea... I'd say try this:

setup a dropdown list for each number. The list should contain each item. (Or vice versa.. whatever)

Then have the user select it.

Have javascript make sure they don't duplicate any items/numbers so it doesn't give you errors later.

Or... just make a list of them in a text field...

Hmm... I dunno.

You gotta think about how you want it to work and figure that out before coding... yeah.
I'll let you know if I think of anything...

[chros]

setup a dropdown list for each number....
Have javascript make sure they don't duplicate any items/numbers so it doesn't give you errors later.
I think it's just a bit easier ... :(

Hmm... I dunno.
:) That's why I have been asking ... :)

I'll let you know if I think of anything...
Thank you very much.

I'm thinking the drag-and-drop solution, I think that may be the easiest way.
Eg: 2 table columns: 1 for the order number, and 1 for the element.
Then the user may drag the element cell to up or down, than the script automatically realises the new order...
I know that in javascript we can use drag-and-drop (I haven't tried though), but how will be this a whole ? :)

[mwinter]

I'm thinking the drag-and-drop solution, I think that may be the easiest way.Drag-and-drop might be somewhat intuitive for some users, but it's not entirely easy to implement, nor is it very amenible to fallback and, unless this is for an environment where client-side scripting is guaranteed (not the Web), you'll need a fallback unless you can forego sorting entirely.

How I'd go about sorting would depend on why I'm doing it, and it's purpose. However, the general method I'd choose would involve placing arrows (move up/down, move to top/bottom), either on each item, or with a radio button on each item and a separate set of arrows for the entire group.

The per-item arrows could either be implemented as links or as submit buttons. Either way, activating one would have the server regenerate the document with items reordered. If the list could be significantly large, then the sorting could also be done client-side. If the order is important and needs to be remembered, updates could be sent back to the server using the XMLHttpRequest object, or similar techniques.

The per-group arrows would operate in a similar way, though only as submit buttons, and the radio button on each item would detemine which would be moved.

Mike

[chros]

...the general method I'd choose would involve placing arrows (move up/down, move to top/bottom), either on each item, or with a radio button on each item and a separate set of arrows for the entire group.

Thanks for the very good idea !!!!
We have came to this conclusion in other forum (I'm reading the smarty forum too).
It would be client side solution, so javascript is my friend. (maybe someone may move this post :) ). It would be an insider's job to sort these items, so the javascript compliance is not an issue.

I paste our messages from the other forum:

A listitem are in a non-editable text field (or in an editable one, if we want to allow edit too), and when a user clicking on the mentioned arrows, javascript will reedit the corresponding textfields, but not the order values.
This can work very well on small lists (eg 10 items).

The drang-and-drop method can only differ from this in that the user can jump more than 1 element at a time.