jquery - setting a limit of items, that can be dragged into a list

Question

Hi, i have this two lists, from which i can move items from one to another with jquery ui and connect lists, with ajax. If an item is pulled over, a message is generated in a php file and then it appears on screen. Now i want that for example the right list should be allowed to contain ten items at max. It would be great if it would be possible with jquery, that if there is already ten items in the list and you go and drag the eleventh, if then the item would somehow vanish, maybe with a little effekt. I think maybe reading out db in the php-file if theres already ten items, and so on. But i have currently no idea, if and in case if in which way, jquery would support this kind of behaviour. Can you give me some advise?

Greetings, maschek

Answer 1

You could select all the items in your list using jquery and then use the length property to find out how many were actually selected. This would let you check how big your list is. E.g:

if ( $('#yourlist li').length() == 10 )
{
    // Do effect here
}

Answer 2

Using the example from http://docs.jquery.com/UI/Droppable, you can do:

    $("#draggable").draggable();

    $("#droppable").droppable({
      drop: function() { 
          if($("#draggable").children().length > 10)
            return;
      }
    });

Ore something along that line.

Answer 3

Unfortunatelly, this doesnt work:

<script type="text/javascript">
$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: \'.connectedSortable\',
        if ( $(\'#sortable2\').length() == 10 )
                    {
                    alert("ten items");
                    },

        placeholder: \'container-highlight\',
        update: function() {    

                    var data = $(this).sortable("serialize") + \'&update=update\'; 

                    alert(data);
                }
       }).disableSelection();
   });

</script>

do i have to place the sample in another line?

Answer 4

I placed the following now between the other configurations:

onStart: function()
            {

        if ( $(\'#sortable2\').length() == 10 )

{ alert("this is a test"); } },

seems to be the right place and syntax, as the rest is working. but nothing happens. no alert is going out, if more then 10 items... any ideas?!

Answer 5

sometimes its so easy. Just putting a "greedy:true," into the deroppable-definition and it works fine.