javascript - 切换可丢弃

Question

当我单击可拖动的 div 时，场景中的某些 div 变为可放置的，而当我将元素拖动到其目的地时，可放置的 div 变为禁用状态。它工作正常但是当我想再次删除另一个元素时，我无法启用相同的 div。我怎样才能启用它？ 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

不是在每次拖动时都重新声明一个可放置的项目，而是声明它们可放置并在您希望禁用或启用它们时设置它们。

$(".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
    });