Click here to Skip to main content
14,237,438 members

Persist JQueryUI Sortable position

Rate this:
5.00 (4 votes)
Please Sign up or sign in to vote.
5.00 (4 votes)
20 Nov 2011CPOL
Example showing how to persist positions of the sortable elements after drag&drop reordering using the JQuery UI sortable

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>

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 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.


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: { 
                                                  '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.


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


About the Author

Jovan Popovic(MSFT)
Program Manager Microsoft
Serbia Serbia
Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.

Comments and Discussions

GeneralMy vote of 5 Pin
dinger2112-Sep-12 13:40
memberdinger2112-Sep-12 13:40 

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

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

Posted 14 Nov 2011


7 bookmarked