CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropjquery-ui-draggable
cr1t
cr1t

Reputation: 123

JQuery UI stop drop from activating twice

We are trying to get a specific effect going with drag and drop.

As soon as the object that is being dragged is moved and option bar is suppose to move up from the bottom. If you move the dragable item between columns it works fine. But when you drop it on one of the options on the bottom bar, first the column drop goes off and then the drop for the option, we want only the option to go off. I've tried setting greed to true, but it's not helping.

Any ideas on what we should do will be great.

I prepared a JSFiddle example of the problem here http://jsfiddle.net/rA4CB/65/

The Javascript code

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

Regards Francois

Upvotes: 2

Views: 499

Answers (1)

Diego3069045
Diego3069045

Reputation: 26

 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);
    }

The only method I can think of is doing a manual check on which droppable your draggable box is dragged dropped on.enter link description here

Upvotes: 1

Related Questions