Alright so I have a nested sortable list, each item is therefore both a container and a sortable element.

The problem I am facing is that, whenever I add a new element, I want jQuery to refresh its internal state with the new item.
According to the documentation, one has to call the sortable method passing as parameter 'refresh', but still I can't make it work.

Sample code:
http://jsfiddle.net/X5sBm/

JavaScript:

$(document).ready(function() {

    var list = $('#mycontainer ul').sortable({

        connectWith: '#mycontainer ul',

        placeholder: 'myplaceholder'

    });



    function addElement(text) {

        $('#mycontainer > ul').append('<li>' + text + '<ul></ul></li>');

        list.sortable('refresh');

    }



    addElement('yolo');

});

HTML:

<div id=mycontainer>

    <ul>

        <li>

            Some text

            <ul>

            </ul>

        </li>

        <li>

            Some text 2

            <ul>

            </ul>

        </li>

    </ul>

</div>

CSS:

#mycontainer > ul {

    display: block;

}



#mycontainer > ul ul {

    min-height: 10px;

    padding-left: 20px;

}



.myplaceholder {

    background-color: yellow;

}

Try to drag one pre existing item under the newly added one, you won't be able to do so even after the refresh.