jQuery UI sortable: determining in what order the items are

UPDATED 2012

FULL WORKING DEMO & SOURCE

get the index position of the elements try to read this:

• Getting the position of the element in a list when it's drag/dropped (ui.sortable)

COOKIE plugin for jquery:

• http://plugins.jquery.com/project/cookie

JQUERY:

 $(function() {    //coockie name     var LI_POSITION = 'li_position';       $('ul#sortable').sortable({         //observe the update event...            update: function(event, ui) {              //create the array that hold the positions...              var order = [];                 //loop trought each li...               $('#sortable li').each( function(e) {               //add each li position to the array...                    // the +1 is for make it start from 1 instead of 0              order.push( $(this).attr('id')  + '=' + ( $(this).index() + 1 ) );              });              // join the array as single variable...              var positions = order.join(';')               //use the variable as you need!              alert( positions );             // $.cookie( LI_POSITION , positions , { expires: 10 });            }        });     });​

HTML:

<ul id="sortable">   <li id="id_1"> Item 1 </li>   <li id="id_2"> Item 2 </li>   <li id="id_3"> Item 3 </li>   <li id="id_4"> Item 4 </li>   <li id="id_5"> Item 5 </li> </ul>

PHP:

this is just an example but you got the idea: you may want use a database instead and use AJAX for get back the lis:

<?php  //check if cookie is set..if ( isset( $_COOKIE['li_position'] ) ) {//explode the cockie by ";"...$lis = explode( ';' , $_COOKIE['li_position'] );// loop for each "id_#=#" ...foreach ( $lis as $key => $val ) {//explode each value found by "="...$pos = explode( '=' , $val );//format the result into li...$li .= '<li id="'.$pos[0].'" >'.$pos[1].'</li>';}//display itecho $li;// use this for delete the cookie!// setcookie( 'li_position' , null );} else {// no cookie available display default set of lis echo '  <li id="id_1"> Fuji </li>   <li id="id_2"> Golden </li>   <li id="id_3"> Gala </li>   <li id="id_4"> William </li>   <li id="id_5"> Jordan </li> ';}?>

Use toArray method which serializes the sortable's item id's into an array of string.

$( "#sortable" ).sortable('toArray');

HTML

<ul id="sortable">   <li id="id1"> Item 1 </li>   <li id="id2"> Item 2 </li>   <li id="id3"> Item 3 </li>   <li id="id4"> Item 4 </li>   <li id="id5"> Item 5 </li> </ul>

JQUERY

 $("#sortable").sortable(            {                update: function () {                var strItems = "";                $("#sortable").children().each(function (i) {                    var li = $(this);                    strItems += li.attr("id") + ':' + i + ',';                });                updateSortOrderJS(strItems); <--- do something with this data                }            });

strItems will look like (new-item-order:item-id)

0,49:1,365:2,50:3,364:4,366:5,39:6

then you can parse it into an update functions something like

List eachTask = new List(itemsList.Trim().Split(new char[] { ',' }));

then

String[] item = i.Split(new Char[] { ':' });