SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    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.

    Thanks
    Last edited by snarky; Oct 7, 2007 at 06:48.

  2. #2
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    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>
    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.

  4. #4
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •