Currently, I am utilizing JQuery draggable/droppables to enable dragging divs from one container to another and having them become children within the new container. Although the HTML reflects the movement, the div disappears from the screen upon releasing it into the target area.
<div id="left" class="droppable">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
<div class="draggable">4</div>
</div>
<div id="right" class="droppable">drag blocks in here</div>
JQuery
$('.draggable').draggable();
$(init);
function init() {
$('.draggable').draggable();
$('.droppable').droppable({
drop: handleDropEvent
});
}
CSS
.draggable {
width:50px;
height:50px;
background:gray;
padding:5px;
margin:5px;
border-radius:10px;
z-index:100;
display:block;
}
.droppable {
box-sizing:border-box;
border:2px solid black;
width:50%;
float:left;
min-height:300px;
}