jQuery UI Sortable - Update not firing

[Vel]

Hello, I have an interesting situation and I cannot determine what is wrong. I am trying to build a drag and drop category and product list. I am using jQuery UI's sortable function to do so. I am using the latest versions of jQuery and jQuery UI.

 

The lists are laid out as so:

<ul> // Top level categories

    <li>TLC 1

        <ul>Sub Category 1

          <li>Cat A</li>

          <li>Cat B</li>

      </ul>

    </li>

    <li>TLC 2

      <ul>Sub Category 2

          <li>Cat C</li>

          <li>Cat D</li>

      </ul>

    </li>

</ul>

 

My javascript is thus:

$(".admin-tree-sort-cat").sortable({
cancel: ".sort-button",
connectWith: ".admin-tree-sort-cat",
update: function(event, ui) {
	var ids = $(this).sortable("toArray").toString();
	$.ajax({
		type: "POST",
		url: "ajax/tree_order.php",
		data: { ids: ids, cat: "1" },
		success: function(data) {
			alert(data);
		}
	});
},
placeholder: "ui-state-highlight"
});

Dragging from sub-category to top level category works fine. Dragging from sub-category to sub-category works fine. However dragging from top level category to sub-category only triggers the update on the top level category, not the sub-category, which means the change doesn't get saved. Why would dragging from sub-category to tlc work but not the other way round?

 

Firebug shows no errors and all the correct ajax calls, except for the missing one when dragging from tlc to sub cat.

[Vel]

Nobody have any suggestions or solutions?