使用jQuery UI可排序插件添加项后刷新列表 [英] Refresh list after adding an item with jQuery UI sortable plugin

问题描述

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

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

我面临的问题是，一个新的元素，我想让jQuery刷新其内部状态与新的项目。
根据文档，一个人必须调用sortable方法作为参数'refresh'传递，但仍然不能使它工作。

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.

示例代码：
http://jsfiddle.net/X5sBm/

JavaScript：

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.

推荐答案

我发现一个便宜的修复：

I found a cheap fix:

我调用sortable再次对同一个标签重新初始化Sortable插件，像这样：

I call sortable again on the same tag reinitialising the Sortable plugin like so:

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

它可以工作。

这篇关于使用jQuery UI可排序插件添加项后刷新列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！