Zagnieżdżanie jQuery UI sortable

Question

Czy istnieje sposób na zagnieżdżanie sortownic jQuery? Podobnie jak w zagnieżdżonych kontenerach, nie w sensie listy zagnieżdżonej.

<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/

tym przykładzie dość dużo roboty, ale kiedy spadnie zagnieżdżony kontener pojawia się błąd:

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

Zakładam, że to dlatego, że podczas przeciągania container jest umieszczony pod myszy, więc kiedy ją upuszczę, spróbuje umieścić ją w sobie.

Mam pracę, choć nie idealna, więc pytanie wciąż stoi.

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

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

Answer 1

Problem

jQuery traci się, gdy element jest zarówno sortowalny pojemnik i sortowalny elementem w sortable pojemnika.

Roztwór

Proste jak owijanie problematycznego obiektu wewnątrz innego elementu. Fiddle: http://jsfiddle.net/ExLqv/12/

do „wewnętrzna” pojemnik jest owinięty tak:

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

uniknąć tego problemu, ponieważ pojemnik wewnętrzny sama nie jest już zarówno sortable pojemnik i sortable obiektu w sortable pojemniku. Zamiast tego obiekt do sortowania jest teraz opakowaniem. Należy pamiętać, że nazwa-pojemnika opakowanie zbiorcze jest po prostu dla wzorca. Możesz go usunąć i nie zmieni to jego funkcjonalności.

Teraz nie wiem, czy to podejście jest dla ciebie lepsze niż obejście, o którym wspomniałeś. Sądzę jednak, że jakiś obejście jest konieczne. Wiele osób napotkało ten problem i wydaje się, że istnieje powszechna zgoda, że ​​zagnieżdżone elementy sortujące nie są obecnie obsługiwaną funkcją. Wydaje się, że grono wtyczek, które rozwiązać ten problem dla ciebie, sądząc po wynikach gdybym google „jquery sortable zagnieżdżone” :)

Answer 2

plugin poprawki:

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

Aby utworzyć zagnieżdżone sortable element jako sortowalny pojemnik i element sortowalny, potrzebuję pomocnika: klon i symbol zastępczy. Przy sortowaniu, sprawdź czy pozycja zastępczy jest 0 następnie ponownego dołączania zastępczy pomóc pojemnik przeciągania wiedzieć gdzie wstawić z powrotem i uniknąć

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

Tutaj jest test na skrzypcach: http://jsfiddle.net/0umjf5tc/1/

Answer 4

Możesz go wypróbować! Działa doskonale!

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

});