Toggle droppable

Question

when I clicked draggable div, some divs on the scene became droppable, and when i dragged element to its destination, droppable divs became disabled. It works fine but when i want to drop another element again, i can't enable same div. How can i enable it? http://jsfiddle.net/6v8Lc/3/

function drop (childSocket, inputCache) {
//when "on mousedown" for pawn, pawnSocket calculated if its suitable droppable or not
$(".pawnSocket:nth-child("+childSocket+")").droppable({
    hoverClass: "over",
    drop: function(ev, ui) {
        var thisPosLeft = $(this).position().left;
        var thisPosTop = $(this).position().top;
        var draggedPawn = $(ui.draggable);
        draggedPawn.css({
            left: thisPosLeft,
            top: thisPosTop
        });
        var thisIndex = $(this).index();
        var suruklenenIndex = piyonYuvaKonum.indexOf(inputCache);
        piyonYuvaKonum[suruklenenIndex] = null;
        piyonYuvaKonum[thisIndex] = inputCache;

        // when i run disable option, it becomes disabled but i can't enable again


        $(".pawnSocket").droppable("disable");
        //$(this).droppable("option", "disabled", true);
    }
});
}

Answer 1

Rather than redeclaring an item droppable on each drag, declare them droppable and set them when you want them disabled or enabled.

$(".drag").draggable({ revert: "invalid"})
    .on("mousedown", function () {
        $(".drop").droppable('enable');

});
$(".drop").droppable({
        hoverClass: "over",
        drop: function (ev, ui) {
            var dizPozL = $(this).position().left + 5;
            var dizPozT = $(this).position().top + 5;
            var suruklenenPiyon = $(ui.draggable);
            suruklenenPiyon.css({
                left: dizPozL,
                top: dizPozT
            });
            suruklenenPiyon.hide("slow");
            $(".drop").droppable("disable");
        },
        disabled:true
    });