0

Ok, I haven't been able to work out the solution to this. I found this answer that helps reject drops if there is already a draggable element in the droppable slot, but I haven't been able to make that slot restart accepting children once it has been emptied. Also, it doesn't work for the initial state of the draggable pieces (notice you can stack more than one piece in a slot if it is the initial state of its child).

Here is the link to the project

And here is the specific piece of code:

jQuery(window).on("load",function() //if document has loaded
{
//Code to be executed when the 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 TO NEW PARENT */
    $(this).children(".game-piece").css({"top":"0", "left":"0"}); /* MAKE GAME PIECE SNAP INTO PLACE */
    },
    out: function(event, ui){
    accept: ".b-piece"
    }
    });

});

Thanks!

Community
  • 1
  • 1
cVergel
  • 181
  • 1
  • 3
  • 11

1 Answers1

1

To reactivate droppable, you can simply modify the option on draggable start. This will cause a problem with revert, so you should also move the droppable disabling on stop event of draggable. Like 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 for initial state, run this after setting the droppable, it should do the trick:

$( ".grid-b:not(:empty) .grid-slot:not(:empty)" ).droppable('option', 'accept', 'none');
Julien Grégoire
  • 16,864
  • 4
  • 32
  • 57
  • Thanks a lot, Julien. Worked great! I thought about using the draggable instead of the droppable to set the accept option, but had no idea about the ui.helper. I also learned about using 'not(:empty), it's amazing what you can accomplish through use of selectors. Thanks a lot! – cVergel Jul 11 '15 at 02:55