JQuery sortierbar verschachtelt sortierbar divs

Diese Frage hat etwas damit zu tun Nest jQuery UI sortables, aber ich konnte mein Problem damit nicht lösen.JQuery sortierbar verschachtelt sortierbar divs

Hier ist das Problem: Ich habe einen Hauptcontainer, der Elemente enthält, diese Elemente sind divs, die nicht gruppierte Elemente oder Gruppen sein können, die andere Elemente enthalten. Ich kann neue Gruppen definieren, indem ich das .multiply-group Div ziehe und dann kann ich die ganze Gruppe auf einmal ziehen. Hier ist der 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>

Und hier ist eine Geige: https://jsfiddle.net/antoq/n1w6e6ar/2/

Das Problem ist, dass ich, wenn ich die letzten Gruppe Behälter aus dem Boden des Hauptbehälters ziehen hält es dort unten statt des Erhaltens zurück zur Hauptbehälter und ich bekomme die folgende Fehlermeldung:

Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.

Kann jemand bitte helfen sie mir zu verstehen, was und wie geht es zu lösen?

Quelle

2016-02-05 António Quadrado

Ich sehe keine Frage. Was ist der Schritt genau, um es zu reproduzieren? – Thangaraja

Ich kann das auch nicht reproduzieren. Welchen Browser benutzen Sie? – Ageonix

Ich kann zwei seltsame Verhaltensweisen sehen: 1) Das Ziehen von "Gruppe 2" mit dem blauen Rand als Griff lässt den grünen Container oft zusammenbrechen; Wenn die Gruppe außerhalb dieses grünen Containers abgelegt wird, wird die Sortierung unterbrochen - die Gruppe bleibt unten; 2) ziehe die "Gruppe 2" mit dem blauen Rand als Griff und lasse ihn in "Gruppe 1" fallen lässt "Gruppe 2" ganz verschwinden. –

Vielleicht waren Grübeln Sie es, wenn Sie, dass codiert: zwei sortables, unnötige Auslöschung von Veranstaltungen, Verbindungslisten, die bereits verbunden waren, usw.

Das Problem mit der letzten Gruppe am Boden stecken zu bleiben oder zu scheint Disappearing ein Problem sein, .sortable() bei jeder Listenaktualisierung erneut anzuhängen, eine Wiederholung, die für unerwartetes Verhalten gesorgt hat. Aber einfach zu entfernen, die Wiederholung aus Ihrer Liste nicht so verhalten, wie Sie scheinbar es soll, so dass einige zusätzliche Refactoring notwendig war:

1) Verwenden Sie nur einen .sortable() Anruf, definieren dann, welche Elemente sortierbar sein wird (nämlich .row und .locked für einzelne bzw. gruppierte Sortierung). Das ist schon genug für das, was Sie vorhaben. Das einzige Problem hierbei ist, dass das Ziehen einer Gruppe in die Mitte einer anderen Gruppe eine weitere Verschachtelungsebene hinzugefügt hat.

2) Um zusätzliche Verschachtelungsebenen zu vermeiden, entfernen Sie die Gruppen .locked, bevor Sie sie erneut einwickeln.

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>

Quelle

2016-02-06 00:13:58

Vielen Dank, das wollte ich tatsächlich erreichen! –

JQuery sortierbar verschachtelt sortierbar divs

Antwort

Verwandte Themen