jquery droppable only one child

问题:

I am new to jQuery and I am working with the droppable API.

I want to have a group of divs that can all hold one and only one droppable item. I've set the class of my droppable divs to inv. I can drop items into the divs but I can find a way to reject a drop once in the drop function.

I want to be able to detect that my div already has a child and if it does revert the dopped element.

my code currently looks like this

$( "div.inv" ).droppable(
{
    drop: function( event, ui ) 
    {
        childCount = $(this).children().length;
        if (childCount !=0)
        {
            //revert droppable to initial position
            return;
        }   
          //if there is a child revert and return
         $( this )
            .addClass( "ui-state-highlight" )
            .append($(ui.draggable))
    }
});

回答1:

What about disabling the droppable area after receiving an item ?

You can do something like this :

$( "div.inv" ).droppable(
{
    drop: function( event, ui )  {
        $(this).droppable('disable');
    }
});