what i want to achive is:

1. sorting the main ul is working but not all the time - i will try to fix that my own but if there is a problem with the code here and not the one in proccess-sortable - tell me.
2. moving li in the main ul is ok but the sub or the sub of the sub is having problem - i can drag something from one sub to it's sub or the other way too - i don't want that to happend.

3. i want to be able to drag li and by selecting that one that only this ul group will send to proccess-sortable to be updated - how can i catch the specific ul of li i am draging?

   $(document).ready(function() {
     $("#test-list").sortable({
       items: "> li",
       handle : '.handle',
       axis: 'y',
       opacity: 0.6,
       update : function () {
         var order = $('#test-list').sortable('serialize');
         $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
       }
     });
   
   
     $("#test-sub").sortable({
       containment: "ul",
       items: "li",
       handle : '.handle2',
       axis: 'y',
       opacity: 0.6,
       update : function () {
         var order = $('ul').sortable('serialize');
         $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
         }
     });
   });
   

this is the html part

<ul id="test-list">
<li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li> 
<li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" /> 
<ul id="test-sub"> 
<li id="listItem_4><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
<li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
<ul id="test-sub"> 
<li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li> 
</ul> 
</li> 
</ul> 
</li> 
</ul>