Nested Draggable and Droppable

Demo of Nested Draggable and Droppable

by Shashank D

HTML

<div id="containers">
    <div class="frame">
    Frame
        <div class="popup">
        <div class="object">O 1</div>
        <div class="object">O 2</div>
        <div class="popup">
        <div class="object">O 5</div>
        <div class="object">O 6</div>
        <div class="popup">
        <div class="object">O 7</div>
        <div class="object">O 8</div>
        <div class="popup">
        <div class="object">O 9</div>
        <div class="object">O 10</div>
        </div>
        </div>
        </div>
        </div>
        <div class="object">O 3</div>
        <div class="object">O 4</div>
    </div>
</div>

CSS

* {
    font-family: sans-serif;
    font-size: 12px;
}
.tool, .frame, .object, .popup, .drop {
    border: 1px solid #888;
    margin: 10px;
    padding: 3px;
    border-radius: 5px;
    box-shadow: 1px 2px 4px #aaa;
}
#tools .tool, #tools .frame {
    height: 50px;
    width: 50px;
    float: left;
    background-color: #fee;
}
#containers {
    clear: both;
    width:600px;
}
#containers .frame {
    min-height: 350px;
}
#containers .object {
    min-height: 20px;
}
#containers .popup {
    min-height: 20px;
    float:left;
    position:inline-block;
    min-width:100px;
}
#containers .drop {
    min-height: 20px;
}
#containers .frame {
    background-color: #eef;
}
#containers .tool {
    background-color: #fee;
    height: auto;
    min-height: auto;
}
#containers .object {
    background-color: green;
    height: auto;
    min-height: auto;
    min-width: 50px;
    color:#fff;
    float:left;
}
#containers .ph {
    margin: 10px;
    padding: 3px;
    border: 1px solid #0f0;
    border-radius: 5px;
    width:100%;
}
.ui-state-hover {
    background: #07f!important;
}
.insidePopup{border: 2px solid #0ff; }

JavaScript

$('#containers .frame .popup, #containers .frame .object ').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.object',
    cursor: 'move',
     greedy: true ,
    drop: function (event, ui) {
        $(ui.draggable).addClass("insidePopup");
        ui.draggable.detach().appendTo($(this));
    }
});
//$('#containers .frame .popup').sortable();
$('#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"
});