Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Persist JQueryUI Sortable position

, 20 Nov 2011
Rate this:
Please Sign up or sign in to vote.
Example showing how to persist positions of the sortable elements after drag&drop reordering using the JQuery UI sortable
Introduction
 
If you have seen JQueryUI Sortable, you know that there is an easy way to implement drag&drop reordering of list items/components. If you have a set of items (e.g. LI elements) that are placed inside the sortable section (e.g. UL list) as the ones shown in the following listing:
 
<ul id="sortable">
	<li id="item1">Item 1</li>
	<li id="item2">Item 2</li>
	<li id="item3">Item 3</li>
	<li id="item4">Item 4</li>
	<li id="item5">Item 5</li>
	<li id="item6">Item 6</li>
	<li id="item7">Item 7</li>
</ul>
 
You can convert this to the sortable list using the single line of code:
 
$("#sortable" ).sortable();
 
You can find live examples on the JQueryUI Sortable demo site[^].
 
Problem
 
Problem is how to persist order of the list elements once the list is updated? If you just let the JQuery UI sortable to reorder items in the list, the next time user visits the page original order will be restored.
 
Solution
 
The best solution is to create one server-side page (I will call it persistListOrder.php) that accepts id of the list and array of the list item ids. Then you can put Ajax call in the update function of the sortable widget that will send new order of elements to the server-side page. Example is shown in the following listing:
 
$("#sortable" ).sortable({
                  
                  update: function (event, ui) {
 
                           var list =  $(this).sortable("toArray").join("|");
                           $.ajax({   url: "/persistListOrder.php",
                                      data: { 
                                                  'section':this.id,              
                                                  'components': list
                                            }
                                  });
                  }
});
 
In this code, when the order of the sortable list is updated, ids of the list items are serialized to array separated with pipe separator. Id of the section (UL list) and list of ids is sent to the server-side page persistListOrder that will persist the changes. The parameter section is id of the list, and components is pipe-separated array of child items' ids.
This list can be saved into the database, and used to generated list on the server side when user visits the page again.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jovan Popovic
Architect Gowi
Serbia Serbia
Started as a young scientist - winning the highest national awards in mathematics, physics, electrotechnics, and electronics.
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia, as a first in the class, as a Master of Software Sciences.
Currently working in Gowi as a Software engineer, architect, and project manager since 2004 - mostly using Microsoft technologies (ASP.NET, C#). Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Software engineering process(estimation and standardization), mobile and business intelligence platforms.

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberdinger2112-Sep-12 13:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 20 Nov 2011
Article Copyright 2011 by Jovan Popovic
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid