jQuery Sortable - Limiter le nombre d'éléments dans la liste

Question

J'ai un tableau de planification J'utilise jQuery Sortable pour l'édition.

Chaque jour est un UL, et chaque événement est un LI.

Mon jQuery est:

$("#colSun, #colMon, #colTue, #colWed, #colThu").sortable({ 
     connectWith: '.timePieces', 
     items: 'li:not(.lith)' 
    }).disableSelection(); 

Pour rendre la sortable tous LI sauf ceux avec classe "litho" (noms de jour). L'utilisateur peut faire glisser un événement au jour le jour, ou ajouter de nouveaux événements en cliquant sur un bouton, qui ajoute un nouvel événement déplaçable (LI) à la première UL (dimanche).

Je veux que chaque jour n'accepte que jusqu'à 10 événements. Comment est-ce que je fais ceci?

Merci d'avance!

Answer 1

• DEMO:http://so.devilmaycode.it/jquery-sortable-limit-number-of-items-in-list

$(function() { 
    $(".sortables").sortable({ 
     connectWith: '.connectedSortable', 
     //receive: This event is triggered when a 
     //connected sortable list has received an item from another list. 
     receive: function(event, ui) { 
      // so if > 10 
      if ($(this).children().length > 10) { 
       //ui.sender: will cancel the change. 
       //Useful in the 'receive' callback. 
       $(ui.sender).sortable('cancel'); 
      } 
     } 
    }).disableSelection(); 
}); 

Answer 2

Pour avoir le feu fonction à chaque fois que vous essayez de faire glisser un nouvel élément dans une liste spécifique (dynamique), vous devez utiliser on() plutôt que la méthode receive:.

http://jqueryui.com/demos/sortable/#event-receive

$(function() { 
    $("#day1, #day2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 

    $("#day1").on("sortreceive", function(event, ui) { 
     if($("#day1 li").length > 10){ 
      $(ui.sender).sortable('cancel'); 
     } 
    }); 

});