CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
John
John

Reputation: 21

jQuery Nested Droppables

I have a nested set of jQuery droppables...one outer droppable that encompasses most of the page and an a set of nested inner droppables on the page. The functionality I want is:

So that would be easy if I could guarantee 1+ inner droppables would accept the draggable, because the greedy attribute would make sure it would only get triggered once. Unfortunately the majority of the time the inner droppable will also reject the draggable, meaning the greedy option doesn't really help.

Summary: The basic functionality is a set of valid/invalid inner droppables to accept the draggable, but when you toss the draggable outside any of the draggables it gets destroyed by the outer droppable.

What's the best way of doing this?

Upvotes: 2

Views: 2032

Answers (1)

mekwall
mekwall

Reputation: 28974

To be able to do this you can't use the built-in accept option because that will not trigger the drop event for the current droppable if the draggable is not accepter, and will therefor propagate into the parent droppable.

So the best way is to implement your own accept check, which is fairly simple:

$('#foo').droppable({
    drop: function(e){
        console.log(e);
    }
});

var accepted = '#red';
$('#bar').droppable({
    greedy: true,
    drop: function(e,ui){
        if (!$(ui.draggable).is(accepted)) {
            return false;
        }
        console.log(e.target);
    }
});

You can see how the above works on jsFiddle.

Upvotes: 2

Related Questions