Javascript Jquery重置嵌套排序表

我目前正在处理jquery排序表，在过去的一天里我一直被这个问题难住了。我希望创建一个嵌套的排序表，其中每个父级中的子级不连接到其他父级（某些父级为空）。我添加了允许删除父母和孩子的功能。父母和孩子都来自不同的班级

但是，我想添加一个重置功能，用户可以单击按钮将可排序的位置（父级和子级）重置为其原始状态（如页面刷新）

但是，我尝试了多种解决方案，但我无法找到缓存父级和子级的初始状态并刷新列表的方法

这是我尝试过的（缓存父级可排序并刷新），但重置后，子级不再可排序。我不知道为什么会这样

$(document).ready(function(){
$(".parent").sortable({
    containment: "document",
    items: "> div",
    tolerance: "pointer",
    cursor: "move",
    opacity: 0.7,
    revert: 300,
    delay: 150,
    placeholder: "movable-placeholder",
    start: function(e, ui) {
        ui.placeholder.height(ui.helper.outerHeight());
    }
}).on('click', '.delete', function() {
$(this).closest('div').remove();
    });
$(".group-items").sortable({
    items: "> div",
    tolerance: "pointer",
    containment: "parent",
    placeholder: "movable-placeholder-child"
});
var cache = $('.parent').html();
$("#reset").click(function(){
$(".parent").html(cache).sortable("refresh");
});

})

JSFIDLE链接如果您想有更好的想法：

---

您忘了再次调用

$（“.group items”）.sortable（…）

@哦，好的，干杯！