2011-10-13 44 views
4

这只是一个简单的问题,没有人知道一个jquery插件,它复制了与wordpress菜单创建者相同的动作,而您可以拖放菜单项并稍微向右拖动缩小为上述链接的孩子?我到处寻找(我知道它是用jQuery UI制作的),但找不到任何将它封装到插件中的人。jquery插件 - wordpress菜单创建者

问候

编辑

这里是我迄今为止...希望得到任何帮助。

$(".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> 
+0

是的,这个功能在jQuery的UI.Why你不使用[这] http://jqueryui.com/demos/draggable/#sortable – Gowri

+0

'((我知道它是使用jQuery UI),但无法找到任何已将它包装到插件中的人。“# –

+0

我相信,没有插件仅用于排序脚本。为什么需要详细解释 – Gowri

回答

10

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

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

有没有尝试过了还,但要做到这一点。

+0

刚刚结束了建立一个小的js应用程序来完成这个插件的功能。先生,先生+1。进行所有的排序,然后序列化数据。甜。 – Bosworth99

+0

绝对+1 ...这是我一直在寻找的完美! – sergiocruz