jquery plugin - wordpress menu creator

Question

this is just a quick question, does anyone know of a jquery plugin which replicates the same action as the wordpress menu creator whereas you can drag and drop the menu items and also drag slightly to the right to indent as a child for the above link? I have looked everywhere (and I know it's made using the jquery UI) but cant find anyone who has wrapped it up into a plugin.

regards

Edit

Here's what I have so far... would appreciate any help.

$( ".connectSortable" ).sortable({

        placeholder: "ui-state-highlight",

        connectWith: ".connectedSortable",

        items: "li:not(.ui-state-disabled)",

        helper : 'clone',

        beforeStop : function(event, ui) {
            var dist = 25;
            var placeholder = $('.ui-state-highlight');
            var currentDepth = placeholder.attr('depth');
            ui.item.css({ 'margin-left' : (currentDepth*dist) + 'px' }).attr('depth', currentDepth);
        },

        stop : function(event, ui) {
            var child = ui.item;
            var parent = child.prev();
            var parentId = parent.attr('child');
            child.attr('parent', parentId);
        },

        sort: function(event, ui) {

            if( $('.ui-sortable-helper').length != 0 ) {

                // get dragable object
                var moveable = $('.ui-sortable-helper');

                // get the place holder for this object
                var placeholder = $('.ui-state-highlight');

                // find out the offset when draging
                var moveableOffset = moveable.offset();

                // find the placeholder offset
                var placeholderOffset = placeholder.offset();

                // get the left offset for both
                var moveableLeft = moveableOffset.left;
                var placeholderLeft = placeholderOffset.left;

                // set how many pixels to the right you want the indent when pushed as a child
                var dist = 25;

                // when dragging, if the draggable is more than the pixels set to go to the right than the placeholder...
                if( ( moveableLeft - placeholderLeft ) > dist ) {

                    // find the parent element
                    var parent = placeholder.prev();

                    // if the dragged element has not get been assigned a depth (no parent by default)
                    if( typeof moveable.attr('depth') !== 'undefined' ) {
                        // get the draggable object's current depth
                        var thisDepth = moveable.attr('depth');
                    }else{

                        // if the dragged element has not been assigned a depth (no parent by default), set to 0
                        var thisDepth = 0;
                    }

                    // if the parent has been set a depth
                    if( typeof parent.attr('depth') !== 'undefined' ) {

                        // get the parents current depth
                        var currentDepth = parent.attr('depth');
                            currentDepth = ( currentDepth == '' ? '0' : currentDepth );

                        // find out the placeholders current margin set
                        var currentMargin = Number(placeholder.css('margin-left').replace('px', ''));

                        // work out the new margin
                        var newMargin = ((Number(currentDepth)+1)*Number(dist));

                        // move the placeholder so when/if the user releases it is now a child of the above
                        placeholder.attr('depth', (Number(currentDepth)+1)).css({ 'margin-left' : newMargin + 'px' });
                    }else{
                        placeholder.attr('depth', '1').css({ 'margin-left' : dist+'px' });
                    }
                }else{
                    // if not, lets go backwards
                    var parent = placeholder.prev();
                    if( typeof parent.attr('depth') != 'undefined' ) {
                        var currentDepth = parent.attr('depth');
                        currentDepth = ( currentDepth == '' ? '0' : currentDepth );
                        if( currentDepth != '0' ) {
                            placeholder.attr('depth', (Number(currentDepth)-1)).css({ 'margin-left' : ((Number(currentDepth)-1)*Number(dist)) + 'px' });
                        }
                    }else{
                        placeholder.attr('depth', '0').css({ 'margin-left' : '0' });
                    }
                }
            }
        }
    });

html example:

<ul class="connectedSortable connectSortable sortables ui-sortable" id="sortable2"> 
<li id="post-id-1" child="1" parent="0" class="ui-state-default posty">Test 1</li>
<li id="post-id-2" child="2" parent="0" class="ui-state-default posty">Test 2</li>  
<li id="post-id-5" child="5" parent="0" class="ui-state-default posty">Test 3</li>  
<li id="post-id-3" child="3" parent="0" class="ui-state-default posty">Test 4</li>  
<li id="post-id-4" child="4" parent="0" class="ui-state-default posty">Test 5</li>  
</ul>

Answer 1

Think I found a plugin like this, if you are still looking.

http://mjsarfatti.com/sandbox/nestedSortable/

Have not tried it out yet, but about to do just that.