case a fast question, does anybody are conscious of a jquery wordpress plugin which illegal copies exactly the same action because the wordpress menu creator whereas you are able to drag and drop recption menus products as well as drag slightly right to indent growing up for that above link? I've looked everywhere (and that i know it's made while using jquery UI) but cant find anybody that has wrapped up right into a wordpress plugin.

regards

Edit

This is what I've to date... 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>