jquery 插件 - wordpress 菜单创建者

Posted 2023-05-09

【中文标题】jquery 插件 - wordpress 菜单创建者

【英文标题】：jquery plugin - wordpress menu creator

【发布时间】：2011-12-06 15:27:57

【问题描述】：

这只是一个简单的问题，有谁知道一个 jquery 插件，它复制与 wordpress 菜单创建器相同的操作，而您可以拖放菜单项，也可以稍微向右拖动以缩进作为子项上面的链接？我到处寻找（我知道它是使用 jquery UI 制作的），但找不到任何将它包装成插件的人。

问候

编辑

这是我目前所拥有的……希望能提供任何帮助。

$( ".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 示例：

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

【问题讨论】：

是的，jQuery UI 中的这个功能。你为什么不使用 [this]jqueryui.com/demos/draggable/#sortable

(and I know it's made using the jquery UI) but cant find anyone who has wrapped it up into a plugin.

我相信，没有插件只用于排序脚本。为什么你需要详细解释

对此的最终答案是什么？你是在现有的基础上构建的还是使用了不同的库？

我也在寻找同样的东西。最终使用了此处找到的 Wordpress javascript：link

【参考方案1】：

如果你还在寻找，我想我找到了这样的插件。

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

还没有尝试过，但即将这样做。

【讨论】：

正准备构建一个小 js 应用程序来完成这个插件的功能。 +1 给你，先生。进行所有排序，然后对数据进行序列化。甜。

绝对 +1... 非常适合我正在寻找的东西！