Draggable on nested Droppable

Question

following this example.

<div id="containers">
    <div class="frame">
        <div class="popup">Popup</div>
        <div class="object">Object 1</div>
        <div class="object">Object 2</div>            
    </div>
</div>

I want each object to be draggable to popup. once inside the popup, have the possibility to draggable again for the frame

The problem is the second time I do it. When i try draggable object to droppable popup, nothing happenz..

Any Ideas?

here my code. http://jsfiddle.net/PtLLf/49/

I have tried your example on jsfiddle, and it seems it is working fine. I have drag and drop both object into popup. — Rajiv Ranjan, Sep 20 '13 at 11:12
yes but, bring them again to frame and next, draggable again to popup.. nothing changes — David Rodrigues, Sep 20 '13 at 11:17

Irvin Dominin · Accepted Answer · 2013-09-20T11:46:38.837

The reason is because by default, when an element is dropped on nested droppables, each droppable will receive the element.

So in your case the drop of the inner is fired, but the outer div is fired too and get the element in itself.

You can set greedy option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.

Ref: http://api.jqueryui.com/droppable/#option-greedy

Code:

$('#containers .frame .popup').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.object',
     greedy: true ,
    drop: function (event, ui) {
        $(ui.draggable).addClass("insidePopup");
        ui.draggable.detach().appendTo($(this));
    }
});

$('#containers .frame').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.insidePopup',
    greedy: true ,
    drop: function (event, ui) {
        ui.draggable.detach().appendTo($(this));
        $(ui.draggable).removeClass("insidePopup");
    }
});

$('#containers .frame .object').draggable({
    helper: 'clone',
    containment: "document"
});

Demo: http://jsfiddle.net/IrvinDominin/dVFgn/

Draggable on nested Droppable

1 Answers1

Linked