JQuery sest ordinabile sdiv divs

Questa domanda ha qualcosa a che fare con questo Nest jQuery UI sortables, ma non ho potuto risolvere il mio problema con esso.JQuery sest ordinabile sdiv divs

Ecco il problema: ho un contenitore principale che contiene elementi, quegli elementi sono div che possono essere elementi o gruppi non raggruppati, che contengono altri elementi. Posso definire nuovi gruppi trascinando il div .multiply-group e quindi posso trascinare tutto il gruppo in una volta. Ecco il codice:

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

Ed ecco un violino: https://jsfiddle.net/antoq/n1w6e6ar/2/

Il problema è che ottengo è quando ho trascinare l'ultimo contenitore gruppo fuori dal fondo del contenitore principale si ferma lì, invece di tornare al contenitore principale e ottengo il seguente errore:

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

per favore qualcuno può aiutarmi a capire cosa sta succedendo e come risolverlo?

fonte

2016-02-05 António Quadrado

Non vedo alcun problema. Qual è il passo esattamente per riprodurlo? – Thangaraja

Non riesco a riprodurre neanche questo. Quale browser utilizzate? – Ageonix

Riesco a vedere due comportamenti strani: 1) il trascinamento di "Gruppo 2" usando il bordo blu come maniglia spesso fa collassare il contenitore verde; lasciando il gruppo fuori da quel contenitore verde si interrompe l'ordinamento - il gruppo rimane in fondo; 2) trascinando il "Gruppo 2" usando il bordo blu come maniglia e rilasciandolo all'interno di "Gruppo 1", il "Gruppo 2" scompare completamente. –

Forse eri overthinking quando si codificati che: due sortables, inutile cancellazione di eventi, liste di collegamento che sono già stati collegati, ecc

Il problema con l'ultimo gruppo conficcato in fondo o scomparendo sembrava essere un problema di riattaccare .sortable() ad ogni aggiornamento di lista, una ricorrenza che ha fatto per comportamento inaspettato. Ma semplicemente rimuovendo che la ricorrenza ha fatto la vostra lista si comporta come apparentemente voleva che, in modo un po 'di refactoring supplementare era necessaria:

1) utilizzare un solo .sortable() chiamata, quindi definire quali elementi saranno ordinabili (vale a dire .row e .locked per i singoli e ordinamento raggruppato, rispettivamente). Questo è già abbastanza per quello che volevi. L'unico problema qui è che il trascinamento di un gruppo nel mezzo di un altro gruppo ha aggiunto un altro livello di nidificazione;

2) Per evitare livelli di nidificazione aggiuntivi, scartare i gruppi .locked prima di riorganizzarli.

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>

fonte

2016-02-06 00:13:58

Grazie mille, è proprio quello che volevo ottenere! –

risposta

Problemi correlati