Refresh list after adding item with jQuery UI sortable plugin

Question

Ok, so I have a nested sortable list, so each item is both a container and a sortable item.

The problem I am facing is that whenever I add a new element, I want jQuery to update its internal state with a new element. According to the documentation, you need to call the sorting method, passed as the 'refresh' parameter, but still I can not get it to 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 dragging one pre-existing item under a newly added item, you won’t be able to do this even after updating.

Answer 1

:

, Sortable :

$('#mycontainer ul').sortable({
    connectWith: '#mycontainer ul',
    placeholder: 'myplaceholder'
});

.