使用jQuery UI可排序插件添加项目后刷新列表

Question

好吧,所以我有一个嵌套的可排序列表,因此每个项目都是一个容器和一个可排序的元素.

我面临的问题是,每当我添加一个新元素时,我都希望jQuery使用新项目刷新其内部状态.根据文档,必须调用可排序方法作为参数'刷新'传递,但我仍然无法使它工作.

示例代码: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;
}

尝试在新添加的项目下拖动一个预先存在的项目,即使刷新后也无法执行此操作.

Answer 1

我发现了一个便宜的修复:

我在同一个标​​签上再次调用sortable,重新初始化Sortable插件,如下所示:

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

它的工作原理.