Question

我正在开发一个页面，需要在DOM中添加，删除和排序常量HTML元素。我有一个隐藏的DIV，它包含我使用clone（）的所有代码块并将其附加到DOM。 sortable（）适用于已经在DOM中的列表项，但在DOM加载完成后不会对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');

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

编辑：我注意到在注入克隆代码后，该列表确实具有所有可排序列表所获得的类 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

好的工作示例代码不会克隆，而是添加新内容，所以它是另一回事。

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

示例：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;
});

希望你明白我的观点。这段代码适合我：）

jQuery ui - 克隆的代码没有响应排序

1 个答案: