jQuery可排序的嵌套可排序的div
[英]JQuery sortable nested sortable divs
问题描述
This question has something to do with this one Nest jQuery UI sortables , but i couldn't solve my problem with it. 
这个问题与此Nest jQuery UI sortables有关 ，但是我无法解决它的问题。
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. 这是问题所在：我有一个包含项目的主容器，这些项目是div，可以是未分组的项目或组，也可以包含其他项目。 I can define new groups by dragging the .multiply-group div and then I can drag all the group at once. 我可以通过拖动.multiply-group div来定义新组，然后可以一次拖动所有组。 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/ 这是一个小提琴： 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? 有人可以帮我了解发生了什么以及如何解决吗？
1 个解决方案
解决方案1
4 已采纳 2016-02-06 00:13:58
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. 最后一组卡在底部或消失的问题似乎是在每次列表更新时重新附加.sortable()的问题，这种重复会导致意外的行为。 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). 1）仅使用一个.sortable()调用，然后定义哪些项目将是可排序的（分别用于单独和分组排序的.row和.locked ）。 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. 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.