JQuery嵌套可排序手风琴

问题描述：

我正在使用http://mjsarfatti.com/sandbox/nestedSortable/ JQuery的嵌套可排序。我想让每个可嵌套的手风琴。我已经到了可以嵌套排序和手风琴的地步;但是，无论何时将任何可排序项拖到左侧，整个应用程序都会冻结。JQuery嵌套可排序手风琴

这里是我的JS（这运行正常）：

$('ol.sortable').nestedSortable({ 
    disableNesting: 'no-nest', 
    forcePlaceholderSize: true, 
    handle: 'div', 
    helper: 'clone', 
    items: 'li', 
    maxLevels: 10, 
    opacity: .6, 
    placeholder: 'placeholder', 
    revert: 250, 
    tabSize: 25, 
    tolerance: 'pointer', 
    toleranceElement: '> div'     
}); 

$(function() { 
    var stop = false; 
    $("#accordion h3").click(function(event) { 
     if (stop) { 
      event.stopImmediatePropagation(); 
      event.preventDefault(); 
      stop = false; 
      } 
    }); 
    $("#accordion") 
      .accordion({ 
      header: "> ol > li > div > h3" 
    }) 
      .nestedSortable({ 
      axis: "y", 
      handle: "h3", 
      stop: function() { 
      stop = true; 
        } 
      }); 
    });

下面是HTML：

<section id="accordion"> 
    <ol class="sortable"> 
     <li id="list_1"> 
      <div> 
       <h3><a href="#">Header</a></h3> 
       <div> 
        <p>des fields.</p> 
       </div> 
     </div> 
     <li id="list_2"><div>Item 2</div> 
     <ol> 
      <li id="list_3"><div>Sub Item 2.1</div> 
      <li id="list_4"><div>Sub Item 2.2</div> 
      <li id="list_5"><div>Sub Item 2.3</div> 
      <li id="list_6"><div>Sub Item 2.4</div> 
     </ol> 
    </ol> 
</section>

这绝对是只配备使用与sortables手风琴时的一个问题。有没有人遇到过这个问题？

你介意创建一个小提琴？ – 2012-03-20 16:37:02

答

你可能想尝试

$('ol.sortable').nestedSortable({ options }).accordion({accordion options});

答

可能，这将有助于you.view这个链接并下载所有的文件，看到的例子。有关于你的问题的一个例子 http://jqueryui.com/download

感谢

答

你可以使用jQuery UI的排序（）和手风琴（）你自己的传递元素作为参数，并使用在你的函数的方法中的方法你渴望的水平。

答

你可以试试这个插件

(function(){ 

     $.accordion_each = function(obj,options){ 

      function nextChar(my_string){ 
      if(typeof(my_string)!='undefined'){ 
       return my_string.substring(0,my_string.length-1)+String.fromCharCode(my_string.charCodeAt(my_string.length-1)+1) 
      } 
      }; 


      var defaults = {'clicking':false,'show':false}; 


      var options = $.extend({}, defaults, options); 

      obj=$(obj); 

      var init = obj 

     init.children().addClass('a'); 

      var c='a'; 

      for(var i = 0;i<25;i++){ 

       if(obj.find('.'+c).children().next()){ 

         obj.find('.'+c).children().next().addClass(c=nextChar(c)).hide(); 
       } 

      }; 



      var wrapping = obj.find('a.toggler'); 


      wrapping.wrap('<div class="panel"/>') 


      obj.find('div').click(function(e){ 

       if($(this).attr('class')!='a') { 
        e.stopPropagation(); 

        if($(this).next().attr('class') == nextChar($(this).parent().attr('class'))){ 

         obj.find('.toggler-dowm').removeClass('toggler-dowm'); 

         var cur = $(this).next(); 

         if(cur.css('display')=='none'){ 
          $('.'+$(this).next().attr('class'),obj).slideUp('fast'); 
          cur.slideDown('fast'); 
          $(this).find('a').addClass('toggler-dowm'); 

         }else{ 
          cur.slideUp('fast'); 
          $(this).find('a').removeClass('toggler-dowm'); 
         }; 


        }; 
       }; 

      }); 

     }; 

     $.fn.accordion = function(Options) { 
      this.each(function() { 
       $.accordion_each(this, Options); 
      }); 
      return this; 
     }; 
    })(jQuery);

答

像这样的事情

<li id="list_1"> 
    <div class='test'> 
     <div class='header'> Header</div> 
     <div> Content of header 1</div> 
     <div> 
      <p>des fields.</p> 
     </div> 
    </div>

function loadTemplatesAccordion() { 
    $(".test").accordion({ 
     icons: false, 
     autoHeight: false, 
     active: false, 
     header: '.head', 
     collapsible: true 
    }); 
}

JQuery嵌套可排序手风琴

相关推荐