jQuery ordenable - Limitar el número de elementos en la lista

Question

Tengo una tabla de programación Estoy usando jQuery ordenable para la edición.

Cada día es un UL, y cada evento es un LI.

Mi jQuery es:

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

Para que todo se puede ordenar de LI excepto aquellos con clase "lith" (nombres de los días). El usuario puede arrastrar un evento del día a día o agregar nuevos eventos haciendo clic en un botón, que agrega un nuevo evento arrastrable (LI) al primer UL (domingo).

Quiero hacer que cada día acepte solo hasta 10 eventos. ¿Cómo hago esto?

¡Gracias de antemano!

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

Para que el fuego de la función cada vez que intenta arrastrar un elemento nuevo a una lista específica (dinámicamente) tiene que utilizar on() en lugar del método 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'); 
     } 
    }); 

});