Nest jQuery UI-Sortierung

Question

Gibt es eine Möglichkeit, verschachtelte jQuery-Sortierbar zu haben? Wie in verschachtelten Containern, nicht im Sinne einer verschachtelten Liste.

<div class="container"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 
<div class="container"> 
    <div class="item"></div> 
    <div class="container"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
    <div class="item"></div> 
</div> 

$('.container').sortable({ 
    connectWith: '.container' 
}); 

http://jsfiddle.net/ExLqv/2/

Das Beispiel ziemlich funktioniert, aber wenn mir die verschachtelten Container fallen bekomme ich einen Fehler:

Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. 

Ich gehe davon aus, weil, wenn ein container zieht es unter positioniert ist Die Maus, also wenn ich sie fallen lasse, versucht sie es in sich selbst zu legen.

Ich habe eine Arbeit, obwohl nicht ideal, so dass die Frage immer noch steht.

$('.container').sortable({ 
    connectWith: '.container:not(.ui-sortable-helper)', 
    tolerance: "pointer", 
    cursorAt: { left: -50 } 
}); 

http://jsfiddle.net/ExLqv/8/

Answer 1

Das Problem

jQuery verliert, wenn ein Element sowohl eine sortierbare Behälter und eine sortierbare Element innerhalb eines sortierbaren Behälter befindet.

Die Lösung

so einfach wie die problematische Objekt in einem anderen Element gewickelt wird. Fiddle: http://jsfiddle.net/ExLqv/12/

Der ‚innere‘ Container wie folgt gewickelt:

<div class="container-wrapper"> 
    <div class="container"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
    </div> 
</div> 

Sie vermeiden das Problem, weil der innere Behälter selbst nicht mehr ist sowohl eine sortierbare Behälter und ein sortierbare Gegenstand innerhalb eines sortierbar Behälter. Stattdessen ist das sortierbare Objekt jetzt der Wrapper. Beachten Sie, dass der Klassenname Container-Wrapper nur zur Veranschaulichung ist. Sie können es entfernen und es wird die Funktionalität nicht ändern.

Nun, ich weiß nicht, ob dieser Ansatz für Sie besser ist als die von Ihnen erwähnte Problemumgehung. Ich denke jedoch, dass eine Art Workaround notwendig ist. Viele Leute sind auf dieses Problem gestoßen, und es scheint allgemeine Übereinstimmung zu herrschen, dass geschachtelte Sortierungen in diesem Moment kein unterstütztes Feature sind. Es scheint eine Reihe von Plugins, das das Problem für Sie zu beheben, durch die Ergebnisse der Beurteilung, ob ich ‚jquery sortierbar verschachtelter‘ google :)

Answer 2

Plugin Fixes:

var sortable = $.widget("ui.sortable", $.ui.mouse, { 
    _contactContainers: function(event) { 
      // never consider a container that's located within the item itself 
      if($.contains(this.currentItem[0], this.containers[i].element[0]) || this.currentItem[0] === this.containers[i].element[0]) { 
       continue; 
      } 
    } 
} 

Answer 3

Um ein verschachteltes sortierbar Element zu erstellen, wie Sortierbarer Container und sortierbares Element, benötigen einen Helfer: Klon und Platzhalter. Beim Sortieren prüfen, ob Position Platzhalter 0 ist dann wieder append Platzhalter des Drag Container zu helfen wissen, wo wieder einzusetzen und

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

Hier ist der Test auf Geige vermeiden: http://jsfiddle.net/0umjf5tc/1/

Answer 4

Sie können es versuchen! Es funktioniert perfekt!

$('.container').sortable({ 
    helper:'clone', 
    connectWith: '.container', 

});