jquery-plugin - wordpress-Menü Schöpfer

dies ist nur eine kurze Frage, kennt jemand ein jquery-plugin, das repliziert die gleiche Aktion wie die wordpress-Menü Schöpfer, während Sie ziehen und ablegen können Sie die Menüelemente und auch ziehen Sie leicht nach rechts eingerückt als Kind für den oben genannten link? Ich habe überall geschaut (und ich weiß, dass es mit dem jquery UI), aber nicht finden können, jeder, wickelte es in ein plugin.

hinsichtlich

Bearbeiten

Hier ist, was ich habe, so weit... wäre für jede Hilfe dankbar.

$( ".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-Beispiel:

<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>