jQuery Rétablissable basé sur la condition

Question

Je rencontre un problème lié jQuery draggable et droppable. Voici une description de ce que je veux faire.

Première: J'ai deux divs. L'un est <div id="selected"> et l'autre est <div id="container">. "container" a 10 <li> qui sont déplaçables et droppables dans "selected". Voici le code:

<div id="selected"> 
    <ul class="sortable-list"> 
    </ul> 
</div> 


<div id="container"> 
    <ul class="sortable-list"> 
      <li>1</li> 
      <li>2</li> 
      <li>....</li> 
      <li>9</li> 
      <li>10</li> 
    </ul> 
</div> 

Deuxième: Je veux permettre à tous les 5 <li> s de "conteneur" à "sélectionné" div. Si quelqu'un essaie d'ajouter le 6ème <li>, il ne doit pas autoriser l'utilisateur à le faire. C'est le 6ème <li> qui va être inséré dans "selected" doit être rétabli en utilisant jQuery draggable option revert.

c'est-à-dire $("#container li").draggable({ revert: true }); Voici le code javascript pour cela.

$(document).ready(function(){ 

    var total = 0; 
    $("#selected").droppable({ 
     drop: function() { 
       total = $("#selected li").length; 
       //alert(total); 
       if (total >= 5) { 
        $("#container li").draggable({ revert: true }); 
       } else { 
          // below code is not working 
        $("#container li").draggable({ revert: false }); // this is making whole feature weird. I can drag all the <li> anywhere 
       } 
      } 
    }); 
}); 

Cela fonctionne très bien.

Troisième: Mais quand je fais glisser un <li> de « sélectionné » pour « conteneur », le « sélectionné » div aura seulement 4 <li> s. Donc, dans cette situation, plus tard, l'utilisateur devrait être en mesure d'ajouter un autre <li> dans div "selected" de div "conteneur". Mais malheureusement, cela ne fonctionne pas. Tous les <li> s que j'essaie de faire glisser et déposer dans "selected" sont en cours de restauration en raison de la condition if (total >= 5).

Quelqu'un peut-il m'aider à résoudre ce problème en utilisant l'option draggable revert? S'il vous plaît ...

Answer 1

Vous pouvez utiliser le accept option qui prend une fonction pour faire beaucoup plus facile, comme ceci:

$("#selected ul").droppable({ 
    accept: function() { 
     return $("#selected li").length < 5; 
    } 
}); 

You can test it out here. Lorsque vous faites glisser les éléments, le .length tombe en panne et il acceptera à nouveau des éléments ... aucune raison d'être plus compliqué :)

Answer 2

Tout d'abord, définir revert à false, désactivera entièrement la fonction de retour. Comme vous le faites remarquer, vous serez en mesure de déposer les draggables n'importe où. Ce que vous voulez habituellement, c'est revert: 'invalid' ce qui signifie qu'il va revenir quand il est tombé sur tout ce qui n'est pas une droppable qui l'accepte.

Qu'est-ce que vous voulez faire doit être quelque chose comme ceci:

$('#selected').droppable({ 
    drop: function() { 

     // since you're doing a full re-calc every time, this doesn't need to be global 
     var total = $("#selected li").length; 

     if(total >= 5) { 

      // once you've reached five, simply don't accept any more elements 
      // the rest will revert if dropped here 
      $('#selected').droppable('disable'); 
     } 
    } 
});