I am trying to implement Boagworld's Sitemap tutorial, however I am running into difficulty trying to correctly save the child/parent relationships.

The HTML is as follows, however populated with other items as well:

<input type="hidden" name="sitemap-order" id="sitemap-order" value="" />
<ul id=”sitemap”>
  <li id="1">
      <dl>
          <dt><a href=”#”>expand/collapse</a> <a href=”#”>Page Title</a></dt>
          <dd>Text Page</dd>
          <dd>Published</dd>
          <dd><a href=”#”>delete</a></dd>
      </dl>
      <ul><!–child pages–></ul>
  </li>
</ul>

And here is the JQuery code:

$('#sitemap li').prepend('<div class="dropzone"></div>');

$('#sitemap li').draggable({
    handle: ' > dl',
    opacity: .8,
    addClasses: false,
    helper: 'clone',
    zIndex: 100
});

var order = "";

$('#sitemap dl, #sitemap .dropzone').droppable({
  accept: '#sitemap li',
  tolerance: 'pointer',
  drop: function(e, ui) {

      var li = $(this).parent();
      var child = !$(this).hasClass('dropzone');

      //If this is our first child, we'll need a ul to drop into.
      if (child && li.children('ul').length == 0) {
          li.append('<ul/>');
      }

      //ui.draggable is our reference to the item that's been dragged.
      if (child) {
          li.children('ul').append(ui.draggable);
      }else {
          li.before(ui.draggable);
      }

      //reset our background colours.
      li.find('dl,.dropzone').css({ backgroundColor: '', backgroundColor: '' });
      li.find('.dropzone').css({ height: '8px', margin: '0' });

      // THE PROBLEM:
      var parentid = $(this).parent().attr('id');
      menuorder += ui.draggable.attr('id')+'=>'+parentid+',';
      $("#sitemap-order").val(order);

  },
  over: function() {
      $(this).filter('dl').css({ backgroundColor: '#ccc' });
      $(this).filter('.dropzone').css({ backgroundColor: '#aaa', height: '30px', margin: '5px 0'});
      },
  out: function() {
      $(this).filter('dl').css({ backgroundColor: '' });
      $(this).filter('.dropzone').css({ backgroundColor: '', height: '8px', margin: '0' });
  }
});

When moving items into the top-level (without parents), the parentid value I get is of the first list item (the parent container), so I can never remove the parent value and have a top-level item.

Is there a no-brainer answer that I'm just not seeing right now? Any help is appreciated.