Click here to Skip to main content
11,640,125 members (67,178 online)
Click here to Skip to main content

Tagged as

Persist JQueryUI Sortable position

, 20 Nov 2011 CPOL 23.9K 6
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.

You may also be interested in...

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    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 | Terms of Use | Mobile
Web03 | 2.8.150731.1 | Last Updated 20 Nov 2011
Article Copyright 2011 by Jovan Popovic
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid