这个问题跟这个有关系Nest jQuery UI sortables ，但我无法用它解决我的问题。
这就是问题所在:我有一个包含项目的主容器，这些项目是 div，可以是未分组的项目或组，其中包含其他项目。我可以通过拖动 .multiply-group div 来定义新组，然后我可以一次拖动所有组。这是代码:
<body>
<div class="multiply-container">
<div class="row multiply">Item 1</div>
<div class="row multiply">Item 2</div>
<div class="row multiply">Item 3</div>
<div class="row multiply-group"> Group 1</div>
<div class="row multiply">Item 4</div>
<div class="row multiply-group"> Group 2 </div>
<div class="row multiply">Item 5</div>
</div>
<script>
var groupWrap = function(){
$('.multiply-container').children().each(function(index, item){
if($(item).hasClass('multiply-group')){
$(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>');
}
});
};
var updateMultiply = function(){
var $container = $('.multiply-container');
$container.children().each(function(index, item){
if($(item).hasClass('locked')){
$(item).children().each(function(i, elem){
$container.append($(elem));
});
$(item).remove();
}
});
groupWrap();
$('.multiply-container').sortable({
connectWith: '.locked',
helper: 'clone',
placeholder: '.multiply-placeholder',
axis: 'y',
update: function(){
updateMultiply();
}
});
$('.locked').sortable({
connectWith: '.multiply-container, .locked',
helper: 'clone',
axis: 'y',
update: function(){
updateMultiply();
},
receive: function(event, ui){
if($(ui.item).hasClass('locked')){
$(ui.sender).sortable('cancel');
return false;
}
}
});
};
updateMultiply();
</script>
</body>
这是一个 fiddle :https://jsfiddle.net/antoq/n1w6e6ar/2/
问题是，当我将 last 组容器拖出主容器底部时，它停在那里而不是返回到主容器，我收到以下错误:
Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
有人可以帮我了解发生了什么以及如何解决吗？
最佳答案
也许您在编写代码时想得太多了:两个可排序对象、不必要的事件取消、连接已经连接的列表等。
最后一组卡在底部或消失的问题似乎是在每次列表更新时重新附加 .sortable() 的问题，这种情况会导致意外行为。但是，简单地删除该重复项会使您的列表表现得不像您预期的那样，因此需要进行一些额外的重构:
1) 仅使用一次 .sortable() 调用，然后定义哪些项目将是可排序的(即 .row 和 .locked 用于分别为个体排序和分组排序)。这已经足够满足您的需求了。这里唯一的问题是将一个组拖到另一个组的中间会增加另一个嵌套级别；
2) 为了防止额外的嵌套层级，在再次包装它们之前打开 .locked 组。
var groupWrap = function() {
$('.locked').children().unwrap();
$('.multiply-container')
.children().each(function(index, item) {
if ($(item).hasClass('multiply-group')) {
$(item).nextUntil('.multiply-group').addBack().wrapAll('<div class="locked"></div>');
}
});
};
var updateMultiply = function() {
var $container = $('.multiply-container');
$container.children().each(function(index, item) {
if ($(item).hasClass('locked')) {
$(item).children().each(function(i, elem) {
$container.append($(elem));
});
$(item).remove();
}
});
};
$('.multiply-container').sortable({
items: '.row, .locked',
helper: 'clone',
axis: 'y',
update: function() {
update();
}
});
var update = function() {
updateMultiply();
groupWrap();
};
update();body {
background-color: #eee;
padding: 50px;
}
.multiply {
height: 45px;
width: 100%;
background-color: violet;
border: 1px solid purple;
margin: 0 auto;
text-align: center;
}
.multiply-group {
height: 25px;
width: 100%;
background-color: teal;
border: 2px solid orange;
margin: 0 auto;
text-align: center;
}
.multiply-container {
background-color: lime;
padding: 20px;
}
.multiply-placeholder {
height: 65px;
width: 100%;
}
.locked {
padding: 20px;
background-color: cyan;
border: 1px solid blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<body>
<div class="multiply-container">
<div class="row multiply">Item 1</div>
<div class="row multiply">Item 2</div>
<div class="row multiply">Item 3</div>
<div class="row multiply-group">Group 1</div>
<div class="row multiply">Item 4</div>
<div class="row multiply-group">Group 2</div>
<div class="row multiply">Item 5</div>
</div>
</body>关于javascript - JQuery 可排序嵌套可排序 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35231678/