JQuery Nested Sortable Accordion

Question

Sto usando http://mjsarfatti.com/sandbox/nestedSortable/ Sortebili nidificati per JQuery. Voglio rendere ogni nestable una fisarmonica. Sono arrivato al punto in cui ho annidato sibili e fisarmoniche; tuttavia, ogni volta che trascino uno qualsiasi dei sibili a sinistra, l'intera applicazione si blocca.

Qui è la mia JS (questo funziona bene):

$('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; 
        } 
      }); 
    }); 

Ecco il codice 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> 

Questo è sicuramente un problema che arriva solo quando si utilizza fisarmoniche con i sortables. Qualcuno ha incontrato questo problema?

Answer 1

Si potrebbe desiderare di provare

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

Answer 2

Può essere che questo vi aiuterà you.view questo link e scaricare il file e vedere tutto l'esempio. v'è un esempio correlato al problema http://jqueryui.com/download

grazie

Answer 3

Si potrebbe utilizzare jQuery UI sortable() e fisarmonica() metodi all'interno di un metodo della propria passare l'elemento come argomento e di utilizzare la funzione sulla livello che desideri.

Answer 4

Si può provare questo plugin

(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); 

Answer 5

Qualcosa di simile

<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 
    }); 
}