jQuery UI 可对动态添加的项目进行排序

Question

我有 HTML 标记，通过单击添加行按钮，然后一个视觉上隐藏的 HTML 元素被克隆并插入到添加新按钮之前。

<div class='wrapper'>
<div class="container">
    <div class="sortable">
        <div class="ui-state-default">
            <div class="container">
                <div class="sortable">
                    <div class="ui-state-default">Item 1</div>
                    <div class="ui-state-default">Item 2</div>
                    <div class="ui-state-default hidden">Hidden</div> <a href="#" class="add-button"> Add New Sub </a>

                </div>
            </div>
        </div>
        <div class="ui-state-default hidden">
            <div class="container">
                <div class="sortable">
                    <div class="ui-state-default">Item 1</div>
                    <div class="ui-state-default">Item 2</div>
                    <div class="ui-state-default hidden">Hidden</div> <a href="#" class="add-button"> Add New Sub </a>

                </div>
            </div>
        </div> <a href="#" class="add-button"> Add New </a>

    </div>
</div>

这是JS代码：

function sortableInit(container) {
container.find('.sortable').sortable({
    axis: 'y',
    cursor: 'move',
    items: '> .ui-state-default',
});
}
$(function () {
$(".container").each(function () {
    sortableInit($(this));
});
$('.wrapper').on('click', '.add-button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var hidden = $(e.target).siblings('.hidden').clone(true).removeClass('hidden');
    hidden.insertBefore($(e.target));
});
});

这是 jsfiddle link，让我更清楚地了解我正在尝试做什么。

当你运行jsfiddle时，点击Add New按钮，对于新添加的元素，尝试对元素Item 1和Item 2进行排序。虽然可以拖动，但不能排序。

注意： div.ui-state-default 元素可以包含 div.container 元素达到任何深度级别（嵌套的可重复字段组）。

Answer 1

你让它变得比需要的更复杂。与其尝试进行深度克隆 (.clone(true))，不如在克隆的项目上调用 sortableInit()。

JSFiddle Example

$('.wrapper').on('click', '.add-button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    var hidden = $(e.target).siblings('.hidden').clone().removeClass('hidden'); //Removed 'true' from clone
    hidden.insertBefore($(e.target));
    sortableInit(hidden); //This added.
});

jQuery UI 可对动态添加的项目进行排序

jQuery UI sortable for dynamically added items

html

javascript

css

jquery

jquery-ui

JSFiddle Example