jQuery Sortable - Limit number of items in list.

Question

I have a schedule table I'm using jQuiry Sortable for editing.

Each day is a UL, and each event is an LI.

My jQuery is:

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

To make all LI's sortable except those with class "lith" (day names). User can drag an event from day to day, or add new events by clicking a button, which appends a new dragable event (LI) to the fist UL (Sunday).

I want to make each day accept only up to 10 events. How do I do this?

Thanks in advance!

Answer 1

UPDATED with code just for fun! ;-)

DEMO: ajax not working here :-( : http://jsbin.com/aruda/2

     $(function() {

//AJAX PART LOOK SOMETHING LIKE THIS:
    $('a.remove').click(function(e){

      e.preventDefault();

      var Li_ID = $(this).parent().parent().attr('id');

$(this).parent().parent().fadeOut(200).remove();



      $.ajax({
        type: "POST",
        url: "myphppage.php", 
        data: 'action=deleteli&li_id=' + Li_ID, 
        complete: function(data){

          $("#my_ul_li_container").append(data).fadeIn(200);
      }

      });

            });


                $("#sortable1, #sortable2").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();

        //assuming this ADD a new LI

              $('a#add').click(function(){
                // count how many LI's
                var CountLi = $("#sortable1 > li").size();
                // if < 10 Add
                if ( CountLi < 10 ) {
                        $('<li class="ui-state-default"> Item </li>').appendTo('ul#sortable1');
                } else {
        //...
        }
                    });
              });

hope this help!

Let me know!