我有 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 元素(嵌套可重复字段组)。
最佳答案
你让事情变得比需要的更加复杂。无需尝试进行深度克隆 (.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.
});
关于javascript - jQuery UI 可对动态添加的元素进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28745024/