Enable a droppable after it has being disable

Question

Im having a simulair problem as this SO question. I have a div with overflow: scroll with droppables inside. If a draggable drops below the div, the droppable still triggers. The solution from that question does prevent that to happen. However, I have another div with droppables below my first div. That solution prevents me to drop on my 2nd droppable too.

So I had to modify it a bit, and instead of putting the check on drop event, I put it on the over event on the droppable. If the droppable is hidden, I disable it. This makes the 2nd droppable to work, but Im having trouble to re-enable the droppable for future use. Ive tried to use out event of droppable but I guess it gets disable too when I disable the droppable, since it doesnt trigger. How can I enable the droppable after it has being disable? Or is there a better way to do this?

$('.droppable').droppable({            
         over: function(event, ui) {
            var myOverflowObj = $(this).closest(".module, #process-window");

            if (myOverflowObj.length) {

                var cTop = myOverflowObj.position().top + parseInt(myOverflowObj.css("margin-top"));
                var cBtm = myOverflowObj.position().top + parseInt(myOverflowObj.css("margin-top")) + myOverflowObj.height();
                var dTop = $(this).position().top + parseInt($(this).css("margin-top"));
                var dBtm = $(this).position().top + parseInt($(this).css("margin-top")) + $(this).height();

                if ((dBtm > cTop && dTop < cBtm) == false) {
                    $(this).droppable("option", "disabled", true);
                }
            }
        },
        out: function(event, ui) {
            $(this).droppable("option", "disabled", false);           
        }
});

score 0 · Accepted Answer · answered Feb 15 '12 at 08:29

I manage to do a work around, with using the stop event of the draggable object to re-enable those droppables that have been disabled.

$('.draggable').draggable({     
    stop: function() { 
        $.each($('.droppable.ui-state-disabled'), function(index, value) { 
            $(this).droppable("option", "disabled", false);       
        });
   }          
});

Enable a droppable after it has being disable

1 Answers1

Linked