SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: Swapping divs through UI action
Hybrid View
-
Oct 7, 2007, 06:57 #1
- Join Date
- Sep 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Swapping divs through UI action
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.
ThanksLast edited by snarky; Oct 7, 2007 at 07:48.
-
Oct 7, 2007, 09:19 #2
Have a look at Script.aculo.us Sortables.
Not one shred of evidence supports the notion that life is serious.
eternal.co.za - code, thoughts, rants and raves
f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game
-
Oct 7, 2007, 09:54 #3
- Join Date
- Sep 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Code:<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>
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.
-
Oct 7, 2007, 22:06 #4
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)
Not one shred of evidence supports the notion that life is serious.
eternal.co.za - code, thoughts, rants and raves
f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game
-
Oct 8, 2007, 08:34 #5
- Join Date
- Sep 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you so much. Can't believe I missed that on the photo page lol.
Bookmarks