Nest jQuery UI typesables

Question

C'è un modo per avere nested jQuery di tipobles? Come nei contenitori annidati, non nel senso di un elenco annidato.

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

che l'esempio più o meno funziona, ma quando mi calo il contenitore nidificato ottengo un errore:

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

suppongo che sia perché durante il trascinamento di un container è posizionato sotto il mouse, quindi quando lo lascio, cerca di metterlo dentro se stesso.

Ho un lavoro in giro, anche se non ideale quindi la domanda rimane valida.

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

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

Answer 1

Il problema

jQuery perde quando un elemento è sia un contenitore sortable ed un elemento ordinabile all'interno di un contenitore ordinabile.

La soluzione

semplice come avvolgere l'oggetto problematico all'interno di un altro elemento. Fiddle: http://jsfiddle.net/ExLqv/12/

Il contenitore 'interno' è avvolto in questo modo:

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

si evita il problema, perché il contenitore interno in sé non è più sia un contenitore ordinabile e un oggetto ordinabile all'interno di un contenitore ordinabile. Invece, l'oggetto ordinabile è ora il wrapper. Si noti che il nome di classe contenitore-involucro è solo a scopo illustrativo. Puoi rimuoverlo e non cambierà la funzionalità.

Ora, non so se questo approccio è meglio per voi rispetto alla soluzione che avete citato voi stessi. Ritengo tuttavia che sia necessaria una soluzione temporanea di alcuni tipi. Un sacco di persone si sono imbattuti in questo problema e sembra esserci un consenso generale sul fatto che i caratteri nidificati nidificati non sono una funzione supportata in questo momento. Sembra che ci siano un sacco di plugin che risolvere il problema per voi, a giudicare dai risultati, se google 'jQuery ordinabili nidificato' :)

Answer 2

correzioni plugin:

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

Per creare un elemento di ordinabile nidificato come contenitore ordinabile e elemento ordinabile, bisogno di avere un aiuto: clone e segnaposto. Quando si ordina, controlla se la posizione segnaposto è 0 allora ri-accodamento segnaposto per aiutare il contenitore di trascinamento sanno dove inserire indietro ed evitare

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

Ecco il test al violino: http://jsfiddle.net/0umjf5tc/1/

Answer 4

Puoi provarlo! Funziona perfettamente!

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

});