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/

Answer 1

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/