JQuery UI 停止激活两次

Question

我们正在尝试通过拖放获得特定的效果。

一旦被拖动的对象被移动，选项栏就会从底部向上移动。如果您在列之间移动可拖动项目，它就可以正常工作。但是，当您将其放在底部栏上的某个选项上时，首先是列下降，然后是选项下降，我们只希望该选项消失。我尝试将贪婪设置为 true，但这没有帮助。

关于我们应该做什么的任何想法都很棒。

我在这里准备了一个问题的 JSFiddle 示例 http://jsfiddle.net/rA4CB/65/

Javascript代码

$(function () {
    $(".draggable").draggable({
        cursor: "crosshair",
        revert: "invalid",
        start: function () {
            $('#toolbar').slideToggle({
                direction: "up"
            }, 300);
        },
        stop: function () {
            $('#toolbar').slideToggle({
                direction: "down"
            }, 300);
        }
    });

    $("#stage1").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            alert("drop stage 1");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);
        }
    });

    $("#stage2").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            alert("drop stage 2");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);
        }
    });

    $("#stage3").droppable({
        accept: ".draggable",
        drop: function (event, ui) {
            alert("drop stage 3");
            $(this).removeClass("border").removeClass("over");
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().css({
                top: 0,
                left: 0
            }).appendTo(droppedOn);
        }
    });

    $("#DealLost").droppable({
        accept: ".draggable",
        greedy:true,
        drop: function (event, ui) {
            var dropped = ui.draggable;
           alert("Invalid "  + $(dropped).attr('id'));
           $(dropped).remove();
            $('#toolbar').slideToggle({
                direction: "down"
            }, 300);
        }
    });

    $("#DealWon").droppable({
        accept: ".draggable",
        greedy:true,
        drop: function (event, ui) {
            var dropped = ui.draggable;
            alert("Valid " + $(dropped).attr('id'));
            $(dropped).remove();
            $('#toolbar').slideToggle({
                direction: "down"
            }, 300);
        }
    });
});

问候弗朗索瓦

Answer 1

 var dOTb = "false";
$("#stage1").droppable({
    accept: ".draggable",
    drop: function (event, ui){
        if($(this).attr("Id") == "DealLost" || $(this).attr("id") == "DealWon")
        alert("drop stage 1");
        $(this).removeClass("border").removeClass("over");
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({
            top: 0,
            left: 0
        }).appendTo(droppedOn);
    }

我能想到的唯一方法是手动检查您的可拖动框被拖放到哪个可放置的地方。 enter link description here