jQuery draggable et le numéro de dépôt

Question

J'ai 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">. "conteneur" a 30 <li> qui sont déplaçables et droppable dans "sélectionné". 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>29</li> 
      <li>30</li> 
    </ul> 
</div> 

Deuxième: Je veux permettre à tous les 10 <li> s de "conteneur" à "sélectionné" div. Si quelqu'un essaie d'ajouter le 11ème <li>, il ne doit pas autoriser l'utilisateur à le faire. C'est le 11ème <li> qui va être inséré dans "selected" qui doit être annulé en utilisant l'option jQuery draggable 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 >= 10) { 
        $("#container li").draggable({ revert: true }); 
       } else { 
        //$("#container li").draggable({ revert: false }); 
       } 
      } 
    }); 
}); 

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 9 <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 >= 10).

Quelqu'un peut-il m'aider à résoudre ce problème? S'il vous plaît ...

Answer 1

Je voudrais suggérer d'utiliser des sortables, car c'est en quelque sorte la même chose comme des draggables et des droppables sur les deux div.

Ce n'est pas très diffcult avec les sortables, il y a un événement de réception. Observez cet événement et comptez le nombre de li à l'intérieur de #selected, s'il y a plus que ce qui est autorisé, vous pouvez annuler le tri en cours.

Fiddle: http://jsfiddle.net/doktormolle/K7kDz/

Answer 2

d'abord - Je crois que vous devriez faire l'UL droppable au lieu de la DIV, sinon vous allez finir en dehors de l'UL (vous pouvez styler l'UL pour remplir tout DIV, donc il faudra déclenche toujours la partie largable lorsqu'un élément est au-dessus)

$("#selected ul.sortable-list").droppable({ 
    ...... 
}); 

deuxième et troisième - vous avez la partie ELSE où vous définissez false revenir en commentaire ... est-ce juste pour cet exemple ou avez-vous oublié le commentaire là-bas? (Ce qui serait la raison pour laquelle il ne fonctionne pas)

} else { 
    // $("#container li").draggable({ revert: false }); 
} 

aussi - avez-vous essayé Firebug pour vérifier que vous n'avez pas vraiment ces dans la DIV LIs sélectionnée une fois que vous les faites glisser sur?