javascript - How to drag and drop ONLY if there is no child in droppable div? -

ok, haven't been able work out solution this. i found answer helps reject drops if there draggable element in droppable slot, haven't been able make slot restart accepting children once has been emptied. also, doesn't work initial state of draggable pieces (notice can stack more 1 piece in slot if initial state of child).

here link project

and here specific piece of code:

jquery(window).on("load",function() //if document has loaded { //code executed when document loads here $( ".b-piece" ).draggable({ cursor: "move", revert: "invalid"}); $( ".grid-b .grid-slot" ).droppable({     accept: ".b-piece",     drop: function(event, ui) {     $(this).droppable('option', 'accept', 'none'); /* stop accepting objects */     $(this).append(ui.draggable); /* move drag object new parent */     $(this).children(".game-piece").css({"top":"0", "left":"0"}); /* make game piece snap place */     },     out: function(event, ui){     accept: ".b-piece"     }     });  }); 

thanks!

to reactivate droppable, can modify option on draggable start. cause problem revert, should move droppable disabling on stop event of draggable. this:

$( ".b-piece" ).draggable({      cursor: "move",      revert: "invalid"     start: function(e, ui){         ui.helper.parent().droppable('option','accept','.b-piece');     },     stop: function(e, ui){         ui.helper.parent().droppable('option','accept','none');     }      }); 

as initial state, run after setting droppable, should trick:

$( ".grid-b:not(:empty) .grid-slot:not(:empty)" ).droppable('option', 'accept', 'none');