Why I can disable, but can't enable a droppable function?

Question

I need only 1 block in one drop-area and switch if needed. Why I can disable, but can't enable a droppable function?

$(this).droppable("option", "disabled", false); - doesn't work
$(this).droppable("enable"); - doesn't work
Enable a droppable after it has being disable - doesn't work

Here is my code:

$('.my_block').draggable({
    revert: "invalid",        
});

$('.free').droppable({         
    accept: ".my_block",
    drop: function(ev, ui) {             
        $(this).removeClass("free");    
        $(this).addClass("1");                
        ui.draggable.appendTo($(this)).removeAttr('style');
            $(this).droppable("disable");              
        },
        out:  function(ev, ui) {                     
            $(this).droppable("enable");    
            $(this).removeClass("1");    
            $(this).addClass("free");            
        },        
    });

jsfiddle http://jsfiddle.net/4ABCN/2/

And how can I back all red blocks to main positions by one button?

So what the behaviour you are aiming for? I might be able to help you out! `:)` — Tats_innit, Oct 30 '12 at 22:49
I need disable droppable, when one draggable(red) element in it, and if that leave (no one element there, move red block to another black block) i need enable it againt. Now i can't back my red block in first droppable position, couse that disable :( — Jack Bo, Oct 30 '12 at 23:22
Thanks for help, but I need one more try from you, please :) — Jack Bo, Oct 31 '12 at 00:06

Tats_innit · Accepted Answer · 2012-10-31T04:21:39.903

Working demo Deleted old demo

New Demo Try this: http://jsfiddle.net/7EbKS/

Behaviour: Now when user moves the red box you are allowed to drop another one in empty position,

Hope it fits the cause :)

Code

  $(function() {
    foo();

    $('.my_block').draggable({
        revert: "invalid",
        stop: function() {
            $(this).draggable('option', 'revert', 'invalid');
        }

    });

    function foo() {
        $('.block').droppable({
            greedy: true,
            accept: ".my_block",
            // tolerance: "fit",
            drop: function(ev, ui) {
                ui.draggable.appendTo($(this)).removeAttr('style');
             }
        });
    }
    $('.my_block').droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function(event, ui) {
            ui.draggable.draggable('option', 'revert', true);
        }
    });

});

Thanks, but "I need only 1 block in one drop-area", in your code can be more than one.. I think thats becouse $('.1').droppable("enable"); problems with classes, on OUT action classes doesn't changing :( — Jack Bo, Oct 31 '12 at 00:05

Why I can disable, but can't enable a droppable function?

1 Answers1