Hey Guys,  I am having a problem with my sortable list system.  It is a little bit on the unconventional side because I am am trying to allow a user to sort lists but I don’t want them to be able to carry an element from one sub list to another.   Everything is working great for me as far as drag and drop goes in all the major browsers as far as the sorting goes.  The problem comes when I attempt to serialize my list. It attempts to serialize but it leaves out the item that was just moved when the results come back. 

The idea is to allow them to grab a handle (Currently text that says move) ... move the item... drop it and have it update the db using ajax. 

For example if I were to move the first item below the second in the list it serializes as:
id[]=2&id[]=3&id[]=4&id[]=5&id[]=6&id[]=7

leaving out
id[]=1

which should appear after id[]=2&

There is a demo of the code in action here: http://ckeditor.ziplinestaging.com/sortable4.php

and the code is included below:

1. <style type="text/css">
2.     .sortable, .sortable2, .sortable3, .sortable4 { list-style-type: none; margin: 0; padding: 0; width: 100%; }
3.     .sortable2 { border-top: 1px solid #FFFFFF; }
4.     .sortable3 { border-top: 1px solid #FFFFFF; }
5.     .sortable4 { border-top: 1px solid #FFFFFF; }
6.     .sortable li, .sortable2 li, .sortable3 li, .sortable4 li { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; font-size: 12px;  }
7.     .level1 { padding: 2px 2px 2px 0px;background-color: #333333; color: #FFFFFF; }
8.     .level2 { padding: 2px 2px 2px 10px; background-color: #CECECE; }
9.     .level3 { padding: 2px 2px 2px 20px; background-color: #EEEEEE; }
10.     .level4 { padding: 2px 2px 2px 30px; background-color: #CECECE; }
11. </style>
12. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
13. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"> </script>
14. <script type="text/javascript">
15.     $(function() {
16.    
17.         //ON CLICK OF MOVE MAKE THE LIST ITEM DRAGGABLE
18.         $(".move").mousedown(function() {
19.             var parent = $(this).parent('li').parent('ul');
20.             parent.sortable({ axis: 'y' }).disableSelection();
21.         });
22.        
23.         //ON RELEASE MAKE LOCK IT IN PLACE AND UPDATE ORDER (LATER WILL BE SENT USING AJAX)
24.         $(".move").mouseup(function() {
25.             var parent = $(this).parent('li').parent('ul');
26.             var order = parent.sortable('serialize');
27.             parent.sortable('destroy');
28.             alert(order);
29.         });
30.     });
31. </script>
32. <ul class="sortable">
33.     <li class="level1" id="id_1"><span class="move">Move</span> &nbsp; Item 1</li>
34.     <li class="level1" id="id_2"><span class="move">Move</span> &nbsp; Item 2</li>
35.     <li class="level1" id="id_3"><span class="move">Move</span> &nbsp; Item 3</li>
36.     <li class="level1" id="id_4"><span class="move">Move</span> &nbsp; Item 4
37.         <ul class="sortable2">
38.             <li class="level2" id="id_8"><span class="move">Move</span> &nbsp; Item 1 <a href="http://www.msn.com">Sample Link</a></li>
39.             <li class="level2" id="id_9"><span class="move">Move</span> &nbsp; Item 2</li>
40.             <li class="level2" id="id_10"><span class="move">Move</span> &nbsp; Item 3</li>
41.             <li class="level2" id="id_11"><span class="move">Move</span> &nbsp; Item 4</li>
42.             <li class="level2" id="id_12"><span class="move">Move</span> &nbsp; Item 5
43.                 <ul class="sortable3">
44.                     <li class="level3" id="id_15"><span class="move">Move</span> &nbsp; Item 1</li>
45.                     <li class="level3" id="id_16"><span class="move">Move</span> &nbsp; Item 2</li>
46.                     <li class="level3" id="id_17"><span class="move">Move</span> &nbsp; Item 3</li>
47.                     <li class="level3" id="id_18"><span class="move">Move</span> &nbsp; Item 4</li>
48.                     <li class="level3" id="id_19"><span class="move">Move</span> &nbsp; Item 5</li>
49.                     <li class="level3" id="id_20"><span class="move">Move</span> &nbsp; Item 6</li>
50.                     <li class="level3" id="id_21"><span class="move">Move</span> &nbsp; Item 7</li>
51.                 </ul>
52.             </li>
53.             <li class="level2" id="id_13"><span class="move">Move</span> &nbsp; Item 6</li>
54.             <li class="level2" id="id_14"><span class="move">Move</span> &nbsp; Item 7</li>
55.         </ul>
56.     </li>
57.     <li class="level1" id="id_5">Item 5</li>
58.     <li class="level1" id="id_6">Item 6</li>
59.     <li class="level1" id="id_7">Item 7
60.     </li>
61. </ul>