JQuery नेस्टेड सॉर्टेबल Accordion

Question

मैं JQuery के लिए http://mjsarfatti.com/sandbox/nestedSortable/ नेस्टेड सॉर्टेबल का उपयोग कर रहा हूं। मैं प्रत्येक घोंसले को एक accordion बनाना चाहता हूँ। मैं उस बिंदु पर पहुंच गया हूं जहां मैंने सॉर्टेबल और accordions घोंसला है; हालांकि, जब भी मैं बाएं से किसी भी क्रमबद्ध खींचता हूं, तो पूरा एप्लिकेशन जमा हो जाता है।

यहाँ मेरी जे एस है (यह ठीक चलता है):

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

यहाँ एचटीएमएल है:

<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 साथ accordions उपयोग के बारे में आता है। क्या किसी ने इस समस्या को पार किया है?

Answer 1

आप का प्रयास करने के

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

Answer 2

हो सकता है इस you.view इस लिंक की मदद करने और सभी फाइल डाउनलोड करने और उदाहरण देखेंगे चाहते हो सकता है। आपकी समस्या से संबंधित एक उदाहरण http://jqueryui.com/download

धन्यवाद

है

Answer 3

आप इस्तेमाल कर सकते हैं jQuery के यूआई sortable() और अकॉर्डियन() अपनी खुद की एक तर्क के रूप तत्व गुजर और पर अपने फ़ंक्शन का उपयोग करने के एक तरीके के अंदर तरीकों स्तर आप चाहते हैं।

Answer 4

आप इस प्लगइन कोशिश कर सकते हैं

(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

कुछ इस

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