jQuery ui - 克隆代码不响应排序

Question

我正在开发一个需要在 DOM 中添加、删除和排序常量 HTML 元素的页面。我有一个隐藏的 DIV，其中包含我使用 clone() 并将其附加到 DOM 的所有代码块。 sortable() 适用于 DOM 中已有的列表项，但不适用于 DOM 加载完成后注入(inject)的 DOM 列表项。我有以下列表，出于示例目的进行了简化:

<ul class="sprite-list">
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="icon.png">
        </a>
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

我使用以下 jQuery 代码:

$('ul.sprite-list').sortable({
    items: 'li:not(.sprite-add)',
    containment: 'parent',
    opacity: 0.7
}).disableSelection();

通过在页面中硬编码该列表，效果很好。但是在我将相同的列表克隆到 DOM 中后，我似乎无法拖放它们。

我已阅读并看到 working examples sortable() 正在运行。我还看到人们推荐使用 .sortable('refresh') 。所以我尝试了

$('ul.sprite-list').sortable('refresh');

或

$.fn.sortable('refresh');

但都没有成功。我在这里缺少什么？

编辑:我注意到注入(inject)克隆代码后，列表确实具有所有可排序列表都获得的类ui-sortable。

编辑2:我不知道它是否相关，但我使用单独的函数来获取克隆的元素:

function cloneElement(element){
    var container = $('#sprite-clone');

    if(element == 'generationContainer'){
        return container.find('.sprite-generation-container').clone(true);
    }
    else if(element == 'groupContainer'){
        return container.find('.sprite-group-container').clone(true);
    }
    else if(element == 'sprite'){
        return container.find('>li:first').clone(true);
    }
    else if(element == 'customForm'){
        return container.find('.customForm').clone(true);
    }
}

然后，当需要时，我使用 var GenerationContainer = cloneElement(' GenerationContainer');我不确定这是否会影响任何事情。

Answer 1

工作示例代码不会克隆，而是添加新内容，因此这是另一回事。

由于我看不到其余的代码，所以我只是在理论上。可以通过调用 sortable 来完成修复。因此，如果您将可排序代码放入函数中，请在文档准备好时调用它，然后在添加元素时再次调用它。

示例:http://jsfiddle.net/BWkFp/

HTML

<ul class="sprite-list">
    <li>
        test 1
    </li>
    <li>
        test 2
    </li>
    <li>
        test 3
    </li>
    <li class="sprite-add">
        <a href="#">Add</a>
    </li>
</ul>

JS

MakeUlSortable = function () {
    $('ul.sprite-list').sortable({
        items: 'li:not(.sprite-add)',
        opacity: 0.7
    }).disableSelection();
};

$(document).ready(function () {
    MakeUlSortable();
});

$('.sprite-add a').click(function () {
    $(this).before($('.sprite-list li:first-child').clone());
    MakeUlSortable();
    return false;
});

希望你明白我的意思。这段代码对我来说效果很好:)