CODEWITHSUNDEEP
jqueryjquery-uidrag
UserDy
UserDy

Reputation: 357

jQuery UI drop within droppable children

I want to drag and drop an element inside a container. The container will have sub-containers where the draggable elements can be dropped as well. Although when i drag the element inside the sub-containers, the element is instead appended to the main container and not the sub-container.

Drag a red div inside the blue div, then drag a purple div inside the red container that you just appended to the blue div.

It instead appends to the main container and not the red one that you dropped it ontop of.

How can i have the purple div append to either the blue div, or the red div depending on which div your dropped it?

Upvotes: 1

Views: 1759

Answers (1)

Wojciech Mleczek
Wojciech Mleczek

Reputation: 1634

Nested droppables (greedy is very important here):

/* drop on page canvas */
$("#drop").droppable({
    accept: ".inside-drag, .drag",
    drop: function (event, ui) {
        var target = $(event.target);
        var dropped = $(ui.draggable).clone().appendTo(target);
        if (dropped.hasClass('drag')) {
            dropped.droppable({
                accept: ".inside-drag",
                greedy: true,
                drop: function (event, ui) {
                    var target = $(event.target);
                    $(ui.draggable).clone().appendTo(target);
                },
            });
        }
    },
});

Demo

Upvotes: 3

Related Questions