Only allow one draggable in a droppable a time, allow any on remove

Question

Here's what I've got at the minute for my draggable and droppable sections:

$('.planets').draggable({
    opacity: .4,
    create: function(){$(this).data('position',$(this).position())},
    cursorAt:{left:15},
    cursor:'move',
    start:function(){$(this).stop(true,true)},
    revert : 'invalid'
});

$('.targets').droppable({
    greedy: true, ///////////////
  drop: function( event, ui ) {
    $( this ).addClass( "dropped-highlight" );
    $(this).droppable('option', 'accept', ui.draggable); ////////
    $(this).append(ui.draggable); /////////
    snapToMiddle(ui.draggable,$(this)); //This function snaps the draggable to the middle of the droppable
  },
  out: function( event, ui ) {
    $(this).removeClass( "dropped-highlight" );
    $(this).droppable('option', 'accept', '.planets'); /////////
  }
});

At the moment, I can stack multiple draggables in a single droppable. I only want to allow ANY ONE droppable in a draggable at a time. Once a draggable has been removed, a new one can enter that area. The lines of code with /////// are the ones I most recently added in order to try and achieve this.

Edit: This works!

$('.planets').draggable({
    opacity: .4,
    create: function(){$(this).data('position',$(this).position())},
    cursorAt:{left:15},
    cursor:'move',
    start:function(){$(this).stop(true,true)},
    revert : 'invalid'
});

$('.targets').droppable({
  drop: function( event, ui ) {
    if(!$(this).hasClass('dropped-highlight')){
        $( this ).addClass( "dropped-highlight" );
        $(this).droppable('option', 'accept', ui.draggable);
    }
  },
  out: function( event, ui ) {
    $(this).droppable('option', 'accept', '.planets');
            $(this).removeClass( "dropped-highlight" );
  }
});

Answer 1

Check to see if the "dropped-highlight" class is present before you append the item, and remove it on the "out" part of droppable declaration.

Something like (pseudocode):

if !this.hasClass('dropped-highlight'){

(your code)

}

and in drop: this.removeClass('dropped-highlight').

You already have the second thing in place, just add the first.

if !$(this).hasClass("dropped-highlight"){
  $( this ).addClass( "dropped-highlight" );
  $(this).droppable('option', 'accept', ui.draggable);
}