javascript - JQuery sortable nested sortable divs -
this question has 1 nest jquery ui sortables, couldn't solve problem it.
here's problem: have main container contains items, items divs can ungrouped items or groups, contain other items. can define new groups dragging .multiply-group div , can drag group @ once. here's 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 fiddle: https://jsfiddle.net/antoq/n1w6e6ar/2/
the problem when drag last group container out of bottom of main container stops down there instead of getting main container , following error:
uncaught hierarchyrequesterror: failed execute 'insertbefore' on 'node': new child element contains parent.
can please me understand going on , how solve it?
maybe overthinking when coded that: 2 sortables, unnecessary canceling of events, connecting lists connected, etc.
the issue last group getting stuck @ bottom or disappearing seemed issue of re-attaching .sortable() @ every list update, recurrence made unexpected behaviour. removing recurrence made list not behave seemingly intended to, additional refactoring necessary:
1) use 1 .sortable() call, define items sortable (namely .row , .locked individual , grouped sorting, respectively). enough intended. problem here dragging group middle of group added nesting level;
2) prevent additional nesting levels, unwrap .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>
Comments
Post a Comment