这个问题与这个Nest jQuery UI排序有关 ，但我无法解决我的问题。
问题出在这里：我有一个包含项目的主容器，这些项目是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>这里是一个小提琴： https ： //jsfiddle.net/antoq/n1w6e6ar/2/
问题是，我得到的是当我拖出最后一个组容器的主容器的底部它停在那里，而不是回到主容器，我得到以下错误：
Uncaught HierarchyRequestError：未能在'Node'上执行'insertBefore'：新的子元素包含父元素。
有人可以帮助我了解发生了什么以及如何解决它？
This question has something to do with this one Nest jQuery UI sortables, but i couldn't solve my problem with it.
Here's the problem: I have a main container that contains items, those items are divs that can be ungrouped items or groups, that contain other items. I can define new groups by dragging the .multiply-group div and then I can drag all the group at once. Here's the code:
<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>And here's a fiddle: https://jsfiddle.net/antoq/n1w6e6ar/2/
The problem is that I get is when I drag the last group container out of the bottom of the main container it stops down there instead of getting back to main container and I get the following error:
Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
Can someone please help me understand what is going on and how to solve it?
最满意答案
也许你在编写代码时已经过时了：两次排序，不必要的事件取消，已经连接的连接列表等等。
最后一组陷入底部或消失的问题似乎是每次更新列表时重新附加.sortable()的问题，这是重复发生的意外行为。 但简单地消除这种重复使你的列表不像你所期望的那样行事，所以一些额外的重构是必要的：
1）只使用一个.sortable()调用，然后定义哪些项目可以排序（即分别针对单个和分组排序的.row和.locked ）。 对于你的意图已经足够了。 这里唯一的问题是，将一个组拖入另一个组的中间会增加另一个嵌套层次;
2）为了防止额外的嵌套级别，在.locked包装之前解开.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>
Maybe you were overthinking it when you coded that: two sortables, unnecessary canceling of events, connecting lists that were already connected, etc.
The issue with the last group getting stuck at the bottom or disappearing seemed to be an issue of re-attaching .sortable() at every list update, a recurrence which made for unexpected behaviour. But simply removing that recurrence made your list not behave as you seemingly intended it to, so some additional refactoring was necessary:
1) Use only one .sortable() call, then define which items will be sortable (namely .row and .locked for individual and grouped sorting, respectively). That is already enough for what you intended. The only problem here is that dragging a group into the middle of another group added another nesting level;
2) To prevent additional nesting levels, unwrap the .locked groups before wrapping them again.
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>
更多推荐
发布评论