Question

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

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

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

我在这里准备了一个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

JQuery UI停止激活两次

1 个答案: