Recreating your jQuery Sortable() sort order


A reader pinged me with an interesting question.  He was using jQuery the jQuery sortable behavior to allow users to order widgets on a page and then save their layout.  The issue he was having was figuring out how to recreate the layout when the user reloaded the page.

As always there is more than one way to skin a cat, but I came up with a quick demo to illustrate one way to do this.  If we have the user defined sort order it should be easy enough to recreate the view.  I can think of several other ways to accomplish this, but this was the most straight forward way of handling the problem.

For my example I created a div representing my sortable container.  Within the container I created four divs repesenting my sortable children named “div1” through “div4” (I am very creative first thing in the morning).  I then hard-coded a “user defined” sort order that sorts them from “div4” down to “div1”.  Since I know the sort order it is just a matter of looping through my child elements and putting them in their proper place.  This is done by looking at the sort order array and inserting the selected element after the previous element in the sort order.  We skip the first element in the sort order since it obviously will not have a previous element.  The end result being all the divs nicely ordered, just as the user saved them.

Advertisements

About Robert Zehnder

Web application developer specializing in ColdFusion/Railo and Open Source development.

Posted on May 4, 2010, in jQuery and tagged , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: