Swapping divs through UI action

[snarky]

I need to build a page that allows users to ordinally rank elements (first, second, third etc.) and then add a numeric value to indicate the difference between each rank (3.2 or 27.8, whatever). I have a base ordinal ranking that I would like them to start from but I need the user to be able to move individual elements up or down to indicate the ordinal ranking.

Does anybody have a working example of something like this that I can look at? I can do the coding, but I am more interested in looking at the interface to get some ideas on a 'clean' way to go about it.

Thanks

[Mr Moo]

Have a look at Script.aculo.us Sortables.

[snarky]

Thank you! That is a great starting point. And of course now that I have looked at the examples I am starting to wonder if I can actually do the coding to pull the final state out correctly so I can load it into the database.

This example seems pretty close to what I need to do

http://www.gregphoto.net/sortable/advanced/

With this code being the starting point

	<div id="group1" class="section">
		<h3 class="handle">Group 1</h3>
		<div id="item_1" class="lineitem">This is item 1</div>
		<div id="item_2" class="lineitem">This is item 2</div>
		<div id="item_3" class="lineitem">This is item 3</div>
		<div id="item_4" class="lineitem">This is item 4</div>
		<div id="item_5" class="lineitem">This is item 5</div>
		<div id="item_6" class="lineitem">This is item 6</div>
		<div id="item_7" class="lineitem">This is item 7</div>

		<div id="item_8" class="lineitem">This is item 8</div>
		<div id="item_9" class="lineitem">This is item 9</div>
		<div id="item_10" class="lineitem">This is item 10</div>
	</div>

So then I just put what I need into the divs and name them appropriately. That part seems straight enough.

But I guess what I will have to do is navigate the DOM to find the order of the nodes when the user submits the form. Maybe the original script is already doing something like that. I'll have a look in the framework code to see what I can figure out. But if you have any thoughts on this, I would appreciate it.

[Mr Moo]

If you look a little further down the Script.aculo.us demo page there's a section named Serializing. The GregPhoto link has an example of that (click the "Debug: Show serialized group order" button)

[snarky]

Thank you so much. Can't believe I missed that on the photo page lol.