Question

I am using http://mjsarfatti.com/sandbox/nestedSortable/ Nested Sortables for JQuery. I want to make each nestable an accordion. I have gotten to the point where I have nested sortables and accordions; however, whenever I drag any of the sortables to the left, the whole application freezes.

Here is my JS (this runs fine):

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

Here is the 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>

This is definitely a problem that only comes about when using accordions with the sortables. Has anyone run across this problem?

Answer 1

You might want to try

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